material-ui: [Next.js 13] Hydration failed because the initial UI does not match what was rendered on the server
Duplicates
- 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
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 8
- Comments: 21 (7 by maintainers)
Why release a half ass product? Remove next 13 from production until it is FULLY ready. Way too many errors.
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.Same issues here, unfortunately the log does not provide specific details about the location of the error. This error is not closed
Having the same issue here.
Next.js document an example with styled-components for client-side components, since we have a working adapter for styled-components, it could be a temporary workaround https://beta.nextjs.org/docs/styling/css-in-js#styled-components but they mention nothing for server side.
Thanks for pointing this out, I will check to see what updates we’ll need to do.
@AChangXD please open an issue with a reproduction.
This happens for me when I try to use version 13.0.3 of Next JS , using 13.0.0 it works fine.