#20 most commonruntime/UIv0CursorWindsurfBolt.newReplit

Hydration failed: server HTML didn't match the client

Error: Hydration failed because the initial UI does not match what was rendered on the server. / Text content does not match server-rendered HTML.

Got a slightly different error? Paste the exact message and get a fix prompt tailored to it.

Paste your error →

What it means

Next.js builds your page twice: once on the server and once in the browser. The two versions came out different (often because of dates, random numbers, or browser-only data), so React complains.

How to fix it: paste this prompt into your AI builder

Fix prompt for Bolt, Cursor, Replit, v0, Windsurf
My Next.js app has a hydration error. Find the component that renders differently on server and client. Common causes to check: Date.now()/new Date()/Math.random() in render, reading window/localStorage during render, invalid HTML nesting (div inside p, nested <a> or <button>), and browser extensions. Move browser-only values into useEffect or a client-only component (dynamic import with ssr:false), and fix any invalid nesting. Don't use suppressHydrationWarning unless it's for a timestamp. Change only what's needed.

If the AI can't fix it: manual steps

  1. Open the page in an incognito window with extensions disabled to rule out browser extensions (Grammarly, translators) causing it.

Where this happens

Seen in these AI app builders and editors:

v0CursorWindsurfBolt.newReplit

Sources

Related runtime/UI errors

Still stuck? Paste your full error and UnstuckMyVibe will match it and hand you the exact fix prompt.

Fix my error →