CODEWITHSUNDEEP
next.jsstyled-components
purple pillow
purple pillow

Reputation: 488

styled-components doesn't work after the first Incremental Static Regeneration

I have This Next.Js page that revalidate every 1 second:

import styled from 'styled-components';

export const getStaticProps = async () => {
  return {
    props: {},
    revalidate: 1,
  };
};

const Container = styled.div`
  color: red;
  font-size: 100px;
`;

const Shop = () => {
  return <Container>TEST TEST TEST TEST</Container>;
};

export default Shop;

enter image description here

When I start the server on my hosting provider (Shared hosting C-panel), and I visit the page FOR THE FIRST TIME I get this result: enter image description here you can watch the name of class name : BTSqf.

Now when I refresh the page (the server revalidate the page ) I get this result:

enter image description here

You can see that the class name has changed to : cojIBn.

So my question is how can I keep the style of the page after the Incremental Static Regeneration?

ps: when I change the class name (cojIBn) on the Web Developer Tools to the original name (BTSqf) the style comes back

Upvotes: 0

Views: 1012

Answers (1)

purple pillow
purple pillow

Reputation: 488

After Making some additional searches I found the solution on this blog Post

this is fixed by creating a new 'pages/_document.js' file and adding this:

import Document, { Head, Html, Main, NextScript } from 'next/document'
    import { ServerStyleSheet } from 'styled-components'

    export default class MyDocument extends Document {
      render() {
        return (
          <Html lang="en">
            <Head></Head>
            <body>
              <Main />
              <NextScript />
            </body>
          </Html>
        )
      }

      static async getInitialProps(ctx) {
        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()
        }
      }
    }

Upvotes: 1

Related Questions