Next.js: “Hydration failed because the initial UI does not match what was rendered on the server”

What it means

Server and browser render different HTML, e.g. from dates, Math.random, window, or invalid nesting.

How to fix it

Move browser-only code into useEffect and fix invalid HTML nesting like <div> inside <p>.

Paste this into Next.js

Stop retrying previous fixes. I'm getting this error: "Hydration failed because the initial UI does not match what was rendered on the server". Likely cause: Server and browser render different HTML, e.g. from dates, Math.random, window, or invalid nesting. Before editing, show me the relevant files and confirm the root cause. Then: Move browser-only code into useEffect and fix invalid HTML nesting like <div> inside <p>. Change only what's necessary, don't delete working code, don't add new libraries unless required, and tell me exactly what you changed and how to verify it.