Question

Next.js says 'hydration failed' on my v0 landing page

Solved · 323 viewsasked by yuki_builds
Error: Hydration failed because the server rendered HTML didn't match the client.

Only in production, and only on the pricing section.

What I’ve tried

Deleted the pricing section: error gone. Put it back: error back. It has a new Date().getFullYear() in the footer.

Comment

2 answers

Marked as helpful by the asker
dev_ana

You found it. Anything that differs between server and browser at render time (dates, Math.random, window) causes this. The year usually matches, but a timezone edge or a cached HTML from last year does not.

Either render it on the client only:

const [year, setYear] = useState<number>();
useEffect(() => setYear(new Date().getFullYear()), []);

or hardcode the year in a constant you bump once a year. For a footer I'd hardcode it.

Comment
mei_lin

Since it's the pricing section: check for toLocaleString() or Intl.NumberFormat without a locale. The server formats 1200 as 1,200 (en-US), a Dutch browser as 1.200. Classic hydration mismatch that only shows in production, because in dev you're on the same machine.

Always pass the locale: price.toLocaleString('en-US').

Comment
Prices are hardcoded strings here, so it really was the year. Good one to know for when I add a currency switch. yuki_builds