Next JS with styled components component library

Question

Im trying to get next js to load properly with a transpiled styled components component library. Here is a simple repo for reproducing the problem: https://github.com/vongohren/fouc-example

So what happens is that I have a small app that renders the components, but it does not showcase the style on the SSR request, only when the client has been loaded.

Im trying all cases where I do the loading inside the document: https://github.com/zeit/next.js/blob/canary/examples/with-styled-components/pages/_document.js

But it is not able to catch the css from the components. Only the components built in the SSR function itself, and not the components I import.

How can I debug this and figure out how the CSS can be attached on the SSR request as well, and not just the loading of the JS.

I was able to get something to work when using https://github.com/callstack/linaria in the components library, because that outputs a CSS file, I was able to import and add to the SSR rendering. But how can I approach this with styled-components?

Edrian Edrian · Accepted Answer · 2019-12-10T02:04:37

I saw your repo and it looks like your .babelrc could be changed.

This config works well for me:

"plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true,
            "preprocess": false,
            "minify": false
          }
        ]
      ]

The styles are loaded in SSR and no weird flickering is happening. I hope this helps you out.

Next JS with styled components component library

1 Answers