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

What it means in plain English

Next.js draws your page on the server first, then React takes over in the browser. If the browser's version differs, React complains.

Likely causes

• Invalid HTML nesting, e.g. <div> inside <p>, <a> inside <a>.
• Using window, localStorage or typeof window checks while rendering.
• Showing new Date()/random values during render.
• Browser extensions changing the page.

How to fix it, step by step

1. Read the error; Next.js shows the mismatching element.
2. Fix bad nesting (change the outer <p> to a <div>).
3. Move browser-only code into useEffect so it runs after first render.
4. For components that truly can't render on the server, load them with dynamic(() => import('./X'), { ssr: false }).
5. Test in an incognito window to rule out extensions.

How to check it worked

• Reload; the console shows no hydration warning.

Sources

• https://nextjs.org/docs/messages/react-hydration-error (opens in a new tab)