Next.js rendering issue

Question

I've built my website in Next.js, deployed statically via Netlify. Whenever I load it in a new tab, I get a white flash where the SVG logos are visible but nothing else, before the rest of the content loads in. I don't think this is a Flash Of Unstyled Content but it has a similar effect. I'm experiencing on desktop Chrome, Safari and Firefox, but doesn't seen to be happening on mobile. I've been trouble shooting for hours and am no closer to solving. Here's the repo if anyone wants to have a look. Any insights greatly appreciated.

Answer 1

Quoting directly from styled-components' docs:

Basically you need to add a custom pages/_document.js (if you don't have one). Then copy the logic for styled-components to inject the server side rendered styles into the .

Refer to our example in the Next.js repo for an up-to-date usage example.

When using styled-components with Next.js you need to do a little magic in the _document.js. There is a with-styled-components example in the Next.js' repository. Please see here: https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/_document.js