Fixes › Deploys

Hydration failed because the server rendered HTML didn't match the client

v0Cursor

The error

Error: Hydration failed because the server rendered HTML didn't match the client

Why it happens

The component renders something different on the server and in the browser: dates/times, Math.random(), window/localStorage reads during render, invalid HTML nesting (a <div> inside a <p>), or browser extensions changing the DOM.

How to fix it

1. Move browser-only values (localStorage, window, Date.now()) into useEffect.
2. Fix invalid nesting such as <div> inside <p> or <a> inside <a>.
3. Use next/dynamic with ssr:false for browser-only components.
4. Test in an incognito window to rule out extensions.

Fix prompt (paste into Lovable, Bolt, Cursor, Replit or v0)

Next.js shows 'Hydration failed because the server rendered HTML didn't match the client'. Find render-time uses of window, localStorage, Date, Math.random or locale formatting and move them into useEffect or a client-only component, fix any invalid HTML nesting, and explain which component caused it.

FAQ

Is suppressHydrationWarning a fix?

Only for single intentional mismatches like timestamps.

Could an extension cause it?

Yes, try incognito.

Related fixes

• Vercel build fails: Type error / ESLint errors (works locally)
• 404 NOT_FOUND when refreshing a page (React/Vite SPA)
• CORS error: blocked by CORS policy: No 'Access-Control-Allow-Origin' header
• Replit deploy: app not reachable / port not open