Breaking changes in Next.js 14.2?

Next.js has just released version 14.2, and it's stable and ready to use. You can find more information about it on their website. With this new update, you might be curious about what will happen to version 14.1.

If you decide to upgrade to the latest version of Next.js (v14.2), you may encounter similar errors like this. This error mainly has to do with the postcss.config file. You see as the new changes emerge, that means new ways of doing things are going to be implemented, and that’s what Next.js did here. It took me a while to realize what was going on, and how I could fix this issue.

If you use the command npx create-next-app@latest to create a new Next.js file, you will see that the postcss file now has a new extension ".mjs" which stands for module js. This new extension allows for a simpler way of importing and exporting modules, instead of using "require" or "module.export".

Step 1

The first step I took was to rename the file to postcss.config.mjs. Yeah and that’s it for this step, it’s very easy. Now unto the next step

Step 2

The second step is to open your postcss file and edit the content, replacing it with this code. Hit save and that should do it.

If you can recall the old code looks something like this

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

What changed?

1. Type Annotation:
   So this is the old way Vercel did it, it’s exported like this. The new code introduces a type of annotation /** @type {import('postcss-load-config').Config} */ 

2. const vs module.exports
   The new code used const config = ... to declare and assign the configuration object.

Conclusion

And that's how I fixed the error on an existing Next.js project. I guess the best thing to do here, as I did in my case, is to have your existing project, understand the error, and try Googling the error. If Google doesn't bring the solution you wanted, you can try to create a new Next.js project and see the changes that made the new project work.ja