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 .babelrc 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! 😃