Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
[Next.js 13] Hydration failed because the initial UI does not match what was rendered on the server
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Open https://stackblitz.com/github/mui/material-ui/tree/master/examples/nextjs, which will install the latest MUI and Next.js (v13)
Current behavior 😯
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Expected behavior 🤔
No error during development.
Context 🔦
Next.js 13 is just released. Check their blog: https://nextjs.org/blog/next-13
Your environment 🌎
N/A
Issue Analytics
- State:
- Created a year ago
- Reactions:3
- Comments:8 (4 by maintainers)
Top Results From Across the Web
Hydration failed because the initial UI does not match ... - GitHub
Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. that is my getStaticProps code:
Read more >React 18: Hydration failed because the initial UI does not ...
I have been experiencing the same problem lately with NextJS and i am not sure if my observations are applicable to other libraries....
Read more >react-hydration-error - Next.js
The first render is called Hydration which is a feature of React. ... a prop there is no mismatch between what was rendered...
Read more >Hydration failed because the initial UI does not ... - YouTube
Hydration failed because the initial UI does not match what was rendered on server - error. 6.6K views 4 months ago.
Read more >How To Solve Hydration Error In Next.js | by Westin Tang
Although the error message says hydration failed, however, it still shows the correct UI that can be considered rendered successful.
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 Free
Top 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
I think I solved this in my project by removing the MUI Link component from inside the Next.js Link component. If I recall, I used
component={NextLink}and removedpassHref.Thanks for pointing this out, I will check to see what updates we’ll need to do.