If you have recently updated an old Next.js application and encounter the following error when running npm run dev:

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./styles/globals.css
Error: Your custom PostCSS configuration must export a `plugins` key.

Fortunately, this error can be easily fixed. Here’s what you need to do:

  1. Create a postcss.config.json file in the root directory of your Next.js application if it doesn’t already exist.

  2. Open the postcss.config.json file and add the following content:

{
  "plugins": [
    // Add your PostCSS plugins here
  ]
}
  1. Save the file and restart your Next.js application.

By including a plugins key with an empty array in the postcss.config.json file, you ensure that the PostCSS configuration is correctly exported. This resolves the error and allows your application to run without any issues. Make sure to add any necessary PostCSS plugins within the plugins array in the postcss.config.json file as per your project requirements.

Tags: PostCSS, Next.js, CSS, development, configuration