[examples] Next.js example rendering issues

[EugeneDraitsev]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Hi,

If you will try to use official Next.js (TypeScript version) example and refresh a page you will see that something is wrong with styles (maybe rehydration error):

Screen.Recording.2022-05-05.at.21.17.36.mov

The same behavior exists locally and even on production build of this example

Expected behavior 🤔

Styles looks fine when you refresh page

Steps to reproduce 🕹

Steps:

1. Go to https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript
2. Wait until in download dependencies
3. Refresh the page and see the broken styles

Context 🔦

However if you will use react 17 instead of 18, then example works fine

Your environment 🌎

`npx @mui/envinfo`

    @emotion/react: latest => 11.9.0 
    @emotion/styled: latest => 11.8.1 
    @mui/base:  5.0.0-alpha.79 
    @mui/icons-material: latest => 5.6.2 
    @mui/material: latest => 5.6.4 
    @mui/private-theming:  5.6.2 
    @mui/styled-engine:  5.6.1 
    @mui/system:  5.6.4
    @mui/types:  7.1.3
    @mui/utils:  5.6.1
    @types/react: latest => 18.0.8
    react: latest => 18.1.0
    react-dom: latest => 18.1.0
    typescript: latest => 4.6.4

[gurkerl83]

A ticket was opened in the NextJs repo with the same problem. It seems NextJs related due to the version segments where you can observe the problem from happening and those which are not affected; NextJs 12.1.5 works perfectly fine even with React 18 in place; 12.1.6, on the other hand, shows the distortion.

vercel/next.js#36675

Update:
The last working NextJs version was 12.1.6-canary.5. In canary 6 the distortion is there.

Thx!

[MathiasKandelborg]

You can remove the cache component from the _app file, and the FOUC will disappear. I'm still trying to get to the bottom of this weird issue.

[aligajani]

You can remove the cache component from the _app file, and the FOUC will disappear. I'm still trying to get to the bottom of this weird issue.

Yes this fixed it but what is the purpose of that Cache component?

[gurkerl83]

The problem is fixed in NextJs 12.1.7-canary.4 which was also released to NPM. For reference see vercel/next.js#36792

[MathiasKandelborg]

@aligajani that's still a good question to me. At this point I consider suggesting not to use it because the more I think and read about this; the more I come to the conclusion that CSS is already provided in the server code, and a cache isn't needed on the client-side.

But I've been looking from a non-SSR point of view up until this point. I'm going to test with and without the component, in the various ways nextjs (especially) renders, and see what results I come up with.

I've limited time though, so investigations are not going super quick.

---

I've tested the new canary version without the cache components, in all the apps I have with next/mui, and it still works perfectly.

[aligajani]

@MathiasKandelborg Thanks for your reply. I just updated to canary.7 and they patched it.

[siriwatknp]

Seems like it is the same issue as #30410 (comment).

I can confirm that the issue existed in next 12.1.6. The workaround is to upgrade next to canary.

[siriwatknp]

I am closing this issue then.

[oliviertassinari]

Duplicate of #30410