[docs] Add documentation for preventing SSR flicker/FOUC with the Next.js app router

[MikeLautensack]

Related page

https://mui.com/material-ui/experimental-api/css-theme-variables/usage/

Kind of issue

Missing information

Issue description

The current setup detailed in the docs for Next.js integration https://mui.com/material-ui/integrations/nextjs/ with and without CSS theme variables, fails to fix the SSR flicker/FOUC. The docs seem to suggest CSS theme variables are the solution to the SSR flicker/FOUC in the app router based off of the link above however when you navigate to https://mui.com/material-ui/experimental-api/css-theme-variables/usage/ there is a pages router example and I you cannot use the "getInitColorSchemeScript" in the app router.

Context

No response

Search keywords: SSR flicker/FOUC

Search keywords:

[arthurbalduini]

Hello @MikeLautensack, your issue seems to be related to @mui/material and not to this repo @mui/mui-x
I'm moving the issue to the correct repo so the correspondent maintainers can help you! 🙂

[siriwatknp]

@MikeLautensack In the next version of Material UI v6, you can replace the getInitColorSchemeScript with InitColorSchemeScript component. For more detail, check out the documentation page.

[MikeLautensack]

@MikeLautensack In the next version of Material UI v6, you can replace the getInitColorSchemeScript with InitColorSchemeScript component. For more detail, check out the documentation page.

Great news! I was on the v5 docs. I appreciate the help!

[MikeLautensack]

@MikeLautensack In the next version of Material UI v6, you can replace the getInitColorSchemeScript with InitColorSchemeScript component. For more detail, check out the documentation page.

I seem to be encountering an issue where the InitColorSchemeScript comp and the extend theme api are failing to build on vercel while building successfully on my local machine.

[MikeLautensack]

UPDATE: It is also failing locally now

Here are the relavant deps