Next.js and Styled-Components: style loading issue

Have you tried using Styled-Components with your Next.js app but can't get the styles to load properly? This is because the server-side rendering does not fetch the styles before rendering the page. The Styled-Components documentation mentions this very briefly and it is easy to miss. What we actually have to do is inject server-side rendered styles to the head so it can render the page and its styles correctly. Next.js has the exact file you'll need to make this possible. Within the Next.js Github repo you can find _document.js. Within your Next.js project inside the pages folder create a file called _document.js and copy and paste all the code from the _document.js from the Next.js Github repo. This should fix your problem. Remember to restart the server to apply all changes.

-__tests__
-components
-pages
   -_document.js
   -index.js
-public

Comments

[Jawad Ahmed]

Thank you so much!
Works Great

[Dennis Mwangi]

this worked so well you can also create a .babelrc at the root folder of your project and add the following code.
if you are using style-components

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

[Dennis Mwangi]

for those using typescript nextjs template

import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
        });
      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

[Sagar Khadka]

For typescript project,
in _document.tsx
Use the following code.

import Document, { DocumentContext } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

or
Follow this link

Using styled components with next.js 12 and typescript in 2022

Sumukhakb ・ Mar 7 ・ 3 min read

#nextjs #react #webdev #typescript

[Hasta]

nice thanks,, you saved the first render FLICK with materialui & nextjs too

[jxshdavis]

This worked, BUT...

I used this and it worked flawlessly. But now how to I add new fonts to my Next JS app with google fonts. This process involves my _document.js file and I don't know what to do: nextjs.org/docs/basic-features/fon....

[Idoko Emmanuel]

This was really helpful, thanks

[kiehlB]

thank you so much! it worked very well!

[Ante]

I had the same problem with a plugin to prerender react app. HTML would load before the styling and for a split second elements would be a mess. Didn't find a solution there.

Now had the same issue with a production version of next.js, but this trick saved the day. Thanks.

[praise]

Works great thanks.

[Chimeruzee]

Merci beaucoup mon ami. This solved the issue that cost me hours. I am grateful

[Gia Chan]

Thanks!

[HARDIK GUPTA]

Thank you so much it worked like magic

[Gabriel Hercules]

A Hero whitout a cape

[Brad Wray]

Thank you so much for pointing this out!!! Totally mindboggling style problems have been unboggled.