NextJS not working correctly with Styled Components

Question

This could well be a newbie issue and easily resolved.

I have a basic local nextjs app using styled components, it seems to throw up this error:

Here's the full code just incase:

react-dom.development.js?61bb:67 Warning: Prop `className` did not match. Server: "sc-hKgILt dugyKZ" Client: "sc-gsTCUz cZIGcY"
at h1
at styled.h1 (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19542)
at div
at styled.div (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:28:19542)
at div
at Home
at div
at Layout (webpack-internal:///./components/Layout.js:12:23)
at MyApp (webpack-internal:///./pages/_app.js:20:24)
at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)
printWarning @ react-dom.development.js?61bb:67
error @ react-dom.development.js?61bb:43
warnForPropDifference @ react-dom.development.js?61bb:8824
diffHydratedProperties @ react-dom.development.js?61bb:9645
hydrateInstance @ react-dom.development.js?61bb:10400
prepareToHydrateHostInstance @ react-dom.development.js?61bb:14616
completeWork @ react-dom.development.js?61bb:19458
completeUnitOfWork @ react-dom.development.js?61bb:22815
performUnitOfWork @ react-dom.development.js?61bb:22787
workLoopSync @ react-dom.development.js?61bb:22707
renderRootSync @ react-dom.development.js?61bb:22670
performSyncWorkOnRoot @ react-dom.development.js?61bb:22293
scheduleUpdateOnFiber @ react-dom.development.js?61bb:21881
updateContainer @ react-dom.development.js?61bb:25482
eval @ react-dom.development.js?61bb:26021
unbatchedUpdates @ react-dom.development.js?61bb:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js?61bb:26020
hydrate @ react-dom.development.js?61bb:26086
renderReactElement @ index.tsx?8abf:521
doRender @ index.tsx?8abf:787
_callee2$ @ index.tsx?8abf:416
tryCatch @ runtime.js?96cf:63
invoke @ runtime.js?96cf:293
eval @ runtime.js?96cf:118
asyncGeneratorStep @ asyncToGenerator.js?c973:3
_next @ asyncToGenerator.js?c973:25
eval @ asyncToGenerator.js?c973:32
eval @ asyncToGenerator.js?c973:21
_render @ index.js:514
render @ index.js:451
eval @ next-dev.js?53bc:85
eval @ fouc.js?937a:14
requestAnimationFrame (async)
displayContent @ fouc.js?937a:5
eval @ next-dev.js?53bc:84
Promise.then (async)
eval @ next-dev.js?53bc:31
eval @ next-dev.js?53bc:31
./node_modules/next/dist/client/next-dev.js @ main.js?ts=1612366423235:945
__webpack_require__ @ webpack.js?ts=1612366423235:873
checkDeferredModules @ webpack.js?ts=1612366423235:46
webpackJsonpCallback @ webpack.js?ts=1612366423235:33
(anonymous) @ webpack.js?ts=1612366423235:1015
(anonymous) @ webpack.js?ts=1612366423235:1023
Show 2 more frames

When I first start the local server i.e. npm run dev, no error shows. If i click the links to go to my contact and about pages no error shows.

Now if I refresh the page, the error shows.

Anyone had this issue or knows how I can fix it?

UPDATE:

So it turns out, if I leave a gap in between the styles it throws up the error explained above.

So if I change:

const Hero = styled.div`
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
`;

const Heading = styled.h1`
  color: #000;
  font-size:10rem;
  font-weight:900;
`;

to

const Hero = styled.div`
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
`;
const Heading = styled.h1`
  color: #000;
  font-size:10rem;
  font-weight:900;
`;

it works.

Strange?

Also, I never bothered with the _documents.js file, not sure I read somewhere it's needed now?

Vendue

I remember having issues with this. Check you've done everything in this guide. dev.to/aprietof/… . For me step 6 was something I hadn't done. – Eremite

@James I've just updated my question and the solution was to close the gap in between the styles. – Vendue

That's very weird... also from what I remember the _document thing is necessary to get the benefit of SSR. You'll notice it takes longer to load your styles without it. – Eremite

Ok, I'm a little confused over the _doceuments.js file the,. I understand I need to create one according to some sources I read and I paste text in there, what text? – Vendue

I think you can just copy exactly what's in that guide? – Eremite

You can refer to this example repo: github.com/vercel/next.js/tree/master/examples/…. Make sure your _document is setup the same way, and that you have a .babelrc with the same config. – Elrod

Answer 1

Add the following piece of code to .babelrc file in the project.

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

Gotcher

how to add this to swc compiling? – Streamline

Answer 2

If your app is running the new SWC compiler(default from v12), Add the following to next.config.js:

compiler: {
    styledComponents: true,
  }

https://nextjs.org/docs/advanced-features/compiler#styled-components

Indaba

Answer 3

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    reactStrictMode: true,
    styledComponents: true,
  },
};

module.exports = nextConfig;

Add styledComponents and reactStrictMode into the compiler on the next.config.js in Next 12 (SWC)

Personnel