What NextJS code file should I use for CSS in JS "inline mode"?

[devuxer]

The docs show what code to use, but where does this code go if you are using the /pages folder in NextJS?

_app.tsx?
_document.tsx?
something else?

Also, do you need to use dangerouslySetInnerHtml?

Details

Currently,, I'm getting a flash of unstyled content (FOUC) for every page when I first navigate to a page of my website. Once the page re-renders with the correct styling, the website works as expected from then on (unless I force a page refresh). So, the FOUC problem seems to be an issue with CSS in JS not working properly with SSR in NextJS, but once the JS loads, the styling gets processed. I assume this is what "inline mode" and "whole export" are intended to solve.

I wanted to experiment with inline mode, but I'm confused where (which file) to put the code shown in the docs. The code seems to be generating an HTML file as a string, but my NextJS project does not have an HTML file anywhere. I do have an _app.tsx file and the NextJS docs mentions a _document.tsx file (which seems to create an HTML-like file), but it's not clear how the "inline mode" code would fit with either of these files.

I also checked the NextJS page in the docs, but that doesn't say anything about styling issues with SSR.

[vitalijalbu]

What is your problem? I'm using antd with next 13 and works perfectly. Inside app.jsx you must define the antd config provider, then just create pages and import components. That's all. Ssr is no nneded

[devuxer]

The problem is that I get a flash of unstyled content (FUOC) when I first navigate to any page on my website.

My _app.tsx currently has this code:

<ConfigProvider theme={{ token: { colorPrimary: "#8f210a", colorLink: "#8f210a" } }}>
    <Component key={router.asPath} {...pageProps} />
</ConfigProvider>

The page first renders as if there's no CSS at all, then a second later, everything gets styled. After that, if I navigate to another page, it works fine (I assume because it's client-side rendering, not server-side).

[vitalijalbu]

Share a codesandbox pls so i can review