Getting rid of Next.js & styled-components Warning: Prop `className` did not match

Tarek Campos — Thu, 23 Sep 2021 02:11:19 +0000

So, if you've been in touch with the Next.js + styled-components error: "Warning: Prop className did not match", at development stage, here's a how to solve that problem.

This problem only occurs on development stage of Next.js enviroment basically because at the current version of Next.js (11.1.2), Next uses Babel under the hood.

And because of that, we need to inform the compiler that we're using the styled-component library, in a way to keep the stylized layout rendered at refresh time.

For our own lucky, there is an easy way to solve that. With that in mind, lets add the babel-styled-components plugin, as you can see below:

$ yarn add babel-plugin-styled-components -D

or in case you're using npm:

$ npm install --save-dev babel-plugin-styled-components

After that, at the root of our directory, lets create a .babelrc file, then insert the code below:

{
  "presets": ["next/babel"],
  "plugins": [["styled-components", { "ssr": true }]]
}

And that's it, just restart the development build of Next in a way to babel see and apply the latest config, then it should be working 100% error-free.

DEV Community: Tarek Campos

Getting rid of Next.js & styled-components Warning: Prop `className` did not match