I have this working without any of the <a href="https://beta.nextjs.org/d

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Add FAQ on NextJS 13 usage about styled-components-website HOT 2 OPEN

quantizor commented on July 21, 2024

Add FAQ on NextJS 13 usage

from styled-components-website.

Comments (2)

florin-bizgan commented on July 21, 2024 3

For me, this config works without any issues so far on Next 13.

Inside _document.js or _document.tsx add the following:

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

export default class CustomDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext
  ): Promise<DocumentInitialProps> {
    const originalRenderPage = ctx.renderPage;

    const sheet = new ServerStyleSheet();

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

    const intialProps = await Document.getInitialProps(ctx);
    const styles = sheet.getStyleElement();

    return { ...intialProps, styles };
  }

  render() {
    return (
      <Html>
        <Head>{this.props.styles}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Inside next.config.js add:

compiler: {
    styledComponents: true,
  },

The configuration provided is intended to address the issue of style flashing or disappearing when refreshing pages in Next.js 13 with styled-components. By including the code inside the _document.js or _document.tsx file and adding the configuration in the next.config.js file, the styles should remain consistent and not flicker or disappear during page transitions or refreshes.
Hopefully, this can help, and not sure if it was posted before.

from styled-components-website.

quantizor commented on July 21, 2024

@andflett If you're interested in contributing a FAQ page for this, you'd want to make a sibling md(x) to this doc: https://github.com/styled-components/styled-components-website/blob/main/sections/faqs/nesting.mdx

And then add an entry to the sidebar matching your H2 text here: https://github.com/styled-components/styled-components-website/blob/c623f3d0be7b300572583cdac7ed3ab3e2bb0668/pages/docs.json

from styled-components-website.

Recommend Projects