search

mui / material-ui

Material UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
https://mui.com/material-ui/
MIT License
92.44k stars 31.84k forks source link

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

Closed MikeLautensack closed 1 week ago

MikeLautensack commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

@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 commented 1 week ago

@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!