Next.js · browser console

Hydration failed: server HTML didn't match the client

Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client.
  · A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.

What it means

React rendered the page on the server, then got different output in the browser. Something in render depends on the time, randomness, the browser or the user's locale.

Common causes

• new Date(), Date.now() or Math.random() in render
• if (typeof window !== "undefined") branches, or reading localStorage during render
• toLocaleString() with a different server and browser locale or time zone
• Invalid HTML nesting like <p> inside <p> or <div> inside <p>
• Browser extensions that add attributes to <html> or <body>

How to fix it

1. Move browser-only values into useEffect, or render them in a Client Component loaded with next/dynamic and ssr: false
2. Format dates with an explicit timeZone, or on the server only
3. Fix invalid nesting the error points at
4. For extension attributes only: suppressHydrationWarning on <html> (it only applies one level deep)

Prompt for Cursor or Claude Code

React reports a hydration mismatch. Find what renders differently on the server and in the browser (dates, random values, window/localStorage checks, locale formatting, invalid HTML nesting) and fix the cause. Don't add suppressHydrationWarning except for extension attributes on <html> or <body>.

Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.