[Next.js 13] Hydration failed because the initial UI does not match what was rendered on the server

[ocavue]

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

[mnajdova]

Thanks for pointing this out, I will check to see what updates we'll need to do.

[oliviertassinari]

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.

[FullstackJack]

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 removed passHref.

[juliorochafilho]

This happens for me when I try to use version 13.0.3 of Next JS , using 13.0.0 it works fine.

[pcreehan]

This happens for me when I try to use version 13.0.3 of Next JS , using 13.0.0 it works fine.

Same. I'm seeing this as well @mnajdova this may need reopened.

[oliviertassinari]

Do you have a reproduction?

[kristianstroka]

I have same issue, nothing special, I used nextjs for a years, and now updated from 12 to 13, and see this error on first render

[mnajdova]

There were updates in our example, it was around the Link component (and additional font updates too). The Link update is necessary for fixing the hydration errors, so I would recommend looking at that. This is the PR that fixed this issue: #34970

[AChangXD]

Seeing this with the following error:

Warning: Prop className did not match. Server: "MuiStepIcon-text css-117w1su-MuiStepIcon-text" Client: "MuiStepIcon-text css-opt7yd-MuiStepIcon-text"

I am using a custom theme

[mnajdova]

@AChangXD please open an issue with a reproduction.

[aiet7]

Why release a half ass product? Remove next 13 from production until it is FULLY ready. Way too many errors.

[diegoleft]

Same issues here, unfortunately the log does not provide specific details about the location of the error.
This error is not closed

[Tmcerlean]

Having the same issue here.

[hifilorau]

getting this error but only in a input type="password" if i take it off then it works fine. But it's a password field so... not ideal

[oliviertassinari]

I'm cleaning the issues.

[oliviertassinari]

Duplicate of #34896

[word-x]

I upgraded to NextJS 13.5.4 and React 18.2.0, it shows the same error as you guys.

But this combination works fine.
"next": "12.3",
"react": "18.2.0",

Actually, I found that new NextJS 13.5 is not compatible with some MUI component. In my case, it is probably Drawler. If I set the vairant as "permanent", it shows a Hydration failed error.

[sass-developer]

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 removed passHref.

it worked for me

[sass-developer]

Having the same issue here.

[im-Kazmi]

same problem here

[im-Kazmi]

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 removed passHref.

it worked for me
it worked for me also