DEV Community

Cover image for Getting this error in Next.js? You’re not alone.
Moses Sunday
Moses Sunday

Posted on

Getting this error in Next.js? You’re not alone.

Hydration failed because the initial UI does not match what was rendered on the server.
This usually happens when your server-rendered HTML doesn't match what React renders in the browser.
Common causes:

• Using window or localStorage during server rendering
• Rendering different content based on browser-only values
• Incorrect date/time rendering
• Invalid HTML nesting
My first fix:
Move browser-only logic into useEffect, or make the component client-side when necessary.
💡 Tip: Don't just hide the error. Find out why the server and client are rendering different UI.
Have you encountered this error before? 👇

Top comments (0)