Vovy finds the component where the server and browser render different HTML, explains why, and applies the right fix without hiding the warning.
I keep getting a hydration error in my Next.js app, fix it
How it works
- Read the hydration message: Vovy opens the error overlay in your dev server. Hydration is React attaching to HTML the server already sent, and it fails if the two don't match.
- Find the mismatched element: It reads the diff React prints, showing server text versus client text, and finds the component that produced it.
- Spot the usual cause: Common culprits: new Date() or Math.random() in render, reading window or localStorage, a div inside a p tag, or a browser extension editing the page.
- Apply the right fix: Cursor moves browser-only code into useEffect, fixes invalid nesting, or renders that piece only on the client. You review the diff.
- Confirm the console is clean: Vovy reloads in a fresh incognito window, without extensions, and shows the console with no hydration errors.
What you provide
- Your Next.js project running locally
- The page that shows the error
What you get
- The exact mismatched element
- Why it happened
- A real fix, not a suppressed warning
- Clean console
FAQ
Can I just add suppressHydrationWarning?
Only for tiny intentional differences like a timestamp. It hides the problem one level deep and does not fix real mismatches.
Why does it only happen for some people?
Browser extensions like translators and password managers edit the page before React loads. Testing in incognito rules that out.
Does this affect users?
Yes. React throws away the server HTML and re-renders, which makes the page slower and can cause flicker.
Related tasks
All tasks