[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

[siriwatknp]

@MikeLautensack Have you managed to fix the issue? I suggest to use v6 stable packages:

@mui/material: "^6"
@mui/material-nextjs: "^6"
@mui/icons-material: "^6"

Note: @mui/system is not necessary as it's already a dependency of @mui/material.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.