Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add FAQ on NextJS 13 usage #922

Open
quantizor opened this issue May 25, 2023 · 2 comments
Open

Add FAQ on NextJS 13 usage #922

quantizor opened this issue May 25, 2023 · 2 comments

Comments

@quantizor
Copy link
Contributor

quantizor commented May 25, 2023 •
edited
Loading

I have this working without any of the Registry stuff from the Beta Next Docs, just with the following in my next.config.js, but I'm getting a flash of unstyled content because we're seeing the server rendered version for a second before its hydrated. Anyone found a way around this?

compiler: {
    styledComponents: true,
}

Edit:

Using the registry and including an empty <head> in your layout seems to render everything nicely, and avoids any flash of unstyled content:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <head></head>
      <body>
        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
      </body>
    </html>
  );
}

this solution works for me,
I didn't need to use an empty 'head' tag
for those who couldn't, make sure your global styles are also inside the registry, ex:

<StyledComponentsRegistry>
<GlobalStyles />
{children}

</StyledComponentsRegistry>

Thank you! @andflett

Originally posted by @matheuskroska in styled-components/styled-components#3856 (comment)
@quantizor
Copy link
Contributor Author

quantizor commented May 25, 2023 •
edited
Loading

@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

@florin-bizgan
Copy link

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

  1. 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>
    );
  }
}
  1. 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.

@Cyanhead Cyanhead mentioned this issue Jun 11, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@quantizor @florin-bizgan