Error fixes / Next.js
Next.js
Next.js: hydration failed
The HTML from the server did not match the first render in the browser.
The error
Hydration failed because the server rendered HTML didn't match the client.
What it means
Next.js documents this as a difference between the prerendered React tree and the first client render. Hydration is React attaching event handlers to that HTML. Generated apps hit it by reading localStorage, Date, or window while rendering, by nesting tags in an invalid way, or by a browser extension changing the DOM. The page can still appear, then flicker or drop its clicks.
Fix
- Read the diff in the overlay. It shows the server text and the client text. That is the clue.
- Remove window, localStorage, and new Date() from the render path. Put them in useEffect, which runs after hydration, as the Next.js docs describe.
- Fix invalid HTML nesting, such as a paragraph wrapped around a div, or a button inside a button.
- If you only need different markup on the client, render the same HTML first and update it after mount. Do not branch on typeof window during render.
- Retest in a private window with extensions off, so you are not chasing a modified DOM.
Prompt
Fix prompt
The app reports a hydration mismatch: the server HTML did not match the client. Find the component in the overlay. Make the first render identical on server and client. Move localStorage, window and Date reads into useEffect. Fix illegal nested tags. Do not paper over it with suppressHydrationWarning unless the text is a timestamp and you have read the Next.js note that the prop only covers one level. Explain the value that differed.
Questions
Why do clicks stop working after this warning?
React threw away the server HTML and rebuilt the tree on the client. Event handlers from the first pass are not attached where you expect. Fix the mismatch rather than ignoring the warning.
Can I turn SSR off for the whole page?
Next.js documents dynamic import with ssr: false for a component that truly cannot render on the server. Use it for that widget, not as a way to silence every warning.
It only happens in one browser. What then?
An extension may be rewriting the HTML. The Next.js page lists that case. Confirm in a private window before you change the app.