[examples] Next.js example rendering issues
See original GitHub issueDuplicates
- 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):
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:
- Go to https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs-with-typescript
- Wait until in download dependencies
- 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
Issue Analytics
- State:
- Created a year ago
- Reactions:8
- Comments:9 (5 by maintainers)
Top Results From Across the Web
react-hydration-error - Next.js
When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch. In general this means the...
Read more >Next.js Server-Side Rendering Practical Example - DailyDev.io
On this issue, we will be talking about Next.js Server-Side Rendering, enabling high-performant websites by pre-rendering HTML instead of ...
Read more >You're Doing Image Rendering WRONG in Next.js! - YouTube
Want coding problems (with solutions!) delivered to your inbox daily!?Sign Up Here: https://www.papareact.com/universityofcode Join the ...
Read more >Testing and error handling patterns in Next.js - LogRocket Blog
Check out these different ways to run tests and handle errors in Next.js apps using Cypress, a JavaScript-based testing framework.
Read more >Next.js rendering issue - Stack Overflow
js (if you don't have one). Then copy the logic for styled-components to inject the server side rendered styles into the . Refer...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
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!