Solving the Styled Components Warning in Next.JS with Babel

Warning: Prop `className` did not match. Server: “fs-fdsf” Client: “sd-dfasj”

The combination of Next.JS and Styled Components is truly epic. You get fast, Static Rendered, highly semantic code as a result of the union, but you also get an error unless you know the secret config that solves it (like so many things in our industry…. 😒).

This is likely the error you’re getting, or some variant of it:

Warning: Prop `className` did not match. Server: "sc-gKsewC" Client: "sc-dlfnbm"

For some reason, it’s actually kinda hard to find the solution. It’s listed on an obscure Github issue somewhere. Well, without further ado, here you go.

First run:

npm i babel-plugin-styled-components

Then add the following to your and save it to the root directory of your project.

{
"env": {
"development": {
"presets": ["next/babel"],
"plugins": [
[
"babel-plugin-styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
]
},
"production": {
"plugins": [
[
"babel-plugin-styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
],
"presets": ["next/babel"]
},
"test": {
"presets": ["next/babel"]
}
},
"plugins": [
[
"babel-plugin-styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
]
}

And that should do it! You shouldn’t get the error after this.

Happy coding! 😃

I’m a Front End Engineer who loves React, NextJS, and GraphQL. Need a REMOTE React Developer? Contact me at: https://www.linkedin.com/in/bengrunfeld/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store