Next.js does not like when plugins add fields to the config object

[wereHamster]

export default withLinaria({
  cacheDirectory: "./.next/cache/linaria",

  experimental: {
    externalDir: true,
  },
})

 ⚠ Invalid next.config.js options detected:
 ⚠     Unrecognized key(s) in object: 'cacheDirectory'
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config

Better is to separate the plugin-specific config from the Next.js config, like so:

export default withLinaria({ cacheDirectory: "./.next/cache/linaria" })({
  experimental: {
    externalDir: true,
  },
})

That also makes it possible to combine multiple plugins with the help of next-compose-plugins:

import withPlugins from "next-compose-plugins";

export default withPlugins([
  withLinaria({ cacheDirectory: "./.next/cache/linaria" }),
  withMdx(),
  withNx(),
], {
  experimental: {
    externalDir: true,
  },
})