DEV Community

Next.js and Styled-Components: style loading issue

Raúl Sánchez on February 09, 2020

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 d...

Read full post

Ante • Jan 17 '22

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.

jxshdavis • Jul 21 '22

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 • Jul 12 '22

This was really helpful, thanks

praise • Jan 17 '22

Works great thanks.

Zomer Gregorio • Jul 30 '21

Thank you so much bro!

Chimeruzee • Jan 12 '22

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

Gia Chan • Dec 29 '21

Thanks!

HARDIK GUPTA • Dec 26 '21

Thank you so much it worked like magic

Brad Wray • Nov 13 '21

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

kiehlB • Jan 27 '22

thank you so much! it worked very well!

Tha_UI_Guy • Nov 9 '21

Thank you

Hasta • Nov 30 '22

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

Austin Ofor • May 16 '21 • Edited

Thank you so much, you saved my deployed app on Heroku. I also added the .babelrc config below to enable my app to work well.

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

Jerry Buaba • Sep 28 '21

wow this saved me, thanks!

Gabriel Hercules • Nov 22 '21

A Hero whitout a cape

Dennis Mwangi • Mar 17 '23

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 }]]
}

Sagar Khadka • Dec 14 '22 • Edited

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

Dennis Mwangi • Mar 17 '23

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();
    }
  }
}