Question

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

Solved · 9 views · asked by yuki_builds · edited
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

1 answer

Marked as helpful by the asker
dev_ana · edited

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