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: