Hydration Error
A Next.js error when the server and browser disagree about what to show.
What is Hydration Error?
Hydration happens when Next.js takes server-rendered HTML and makes it interactive in the browser. If the server and browser generate different HTML — you get a hydration error. Common cause: using browser-only APIs like localStorage during server rendering.
This error is confusing because your app might look fine — it just has a mismatch between what the server generated and what the browser expects. The fix is usually wrapping browser-only code in a useEffect hook.
In Vibe Coding
Hydration errors are the most confusing Next.js error for vibe coders. They happen when you use browser-only features (like checking the screen size or reading from localStorage) in code that also runs on the server.
Example
For example: You add code that shows "Welcome back!" if the user's name is saved in localStorage. On the server, localStorage doesn't exist, so the server renders nothing. The browser sees the name and renders "Welcome back!" — the mismatch causes a hydration error.