Use of getInitialProps() is no longer recommended. What is recommended instead is getStaticProps() or getServerSideProps()

this is only true for pages, these methods are not available in _document so it is perfectly fine to use getInitialProps in this file

getInitialProps is no longer recommended though

this was never true for _document

how else would you build the css registry?

I'm new to this and don't know exactly how

I was going with Next's recommendation. I didn't realize that there's an exception for _document

what is a CSS registry ?

basically when you are rendering a page with components using CSS-in-JS, these styles will only be applied when the components run in the browser because they rely on some browser features. this results in a FOUC (flash of unstyled content) because the initial response from the server doesn't have the styles then after the js runs in the browser they get applied

to fix this the CSS-in-JS libraries use a cache to collect all the necessary styles while the page is initially rendering to build a registry of styles that the framework (in this case Next.js) can inject in the head of the document to avoid the FOUC because now all the necessary styles will be available in the initial response

Thanks for explaining. So the CSS "in JS" needs to be computed into regular CSS, on the server side, before Next.js sends it to the client side. Right?

yeah, this is why you need this code in _document since it is what collects the CSS and adds it into the head of the document

to be clear, getInitialProps in _document is fine because it has a different behavior than when using it in the custom app or pages. it is still compatible with static generation of pages so it doesn't really have downsides

What are your thoughts about import { CssBaseline } from "@mui/material"; inside of _app , then including <CssBaseline /> in the return?

<CssBaseline /> would be encapsulated inside of a <ThemeProvider theme={someTheme} />

@Rafael Almeida thank you for looking into this last week. I appreciate your response!

I don't know exactly what is the purpose of this component but this sounds like a CSS Reset component, which is pretty standard for component libraries, so nothing wrong