styled-components-website icon indicating copy to clipboard operation
styled-components-website copied to clipboard

Published 20 hours ago • verified publisher icon styled-components

Add FAQ on NextJS 13 usage

Open quantizor opened this issue 2 years ago • 2 comments

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 https://github.com/styled-components/styled-components/issues/3856#issuecomment-1562210779

quantizor avatar May 25 '23 14:05 quantizor