[examples] Next.js example rendering issues

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):

https://user-images.githubusercontent.com/16540432/167009859-5ac2c331-4d71-49b0-b5b8-f81247f02162.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

[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.

[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.

https://github.com/vercel/next.js/issues/36675

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

Thx!