React Hydration Error

The HTML rendered on the server does not match what React renders on the client during hydration. Common causes include using browser-only APIs (Date, Math.random, localStorage) or conditional rendering that differs between server and client. Wrap the offending component in a dynamic import with ssr: false, or use the useEffect hook to run client-only code after mount.

References

nextjs.org/docs/messages/react-hydration-error
react.dev/errors/418

In this namespace

← previous no-unwanted-polyfillio No Unwanted Polyfill.io next → server-only-in-client-component Server-Only in Client Component

no-page-custom-font no-sync-scripts no-title-in-document-head no-typos no-unwanted-polyfillio react-hydration-error server-only-in-client-component sharp-missing-in-production