This error occurs when there is a mismatch of pre-rendered HTML from server and the first render of the browser.

This can be caused by one of the followings:

  • Incorrect nesting of HTML tags,
  • using checks like typeof window !== ‘undefined’ in logic,
  • using browser-only APIs like window/localStorage in logic,
  • incorrectly configured CSS-in-JS libraries etc.

We can implement following solutions depending on use-case:

  1. Using useEffect to run on the client only
  2. Disabling SSR on specific components
  3. Using suppressHydrationWarning

There is a dedicated information page on official site of Next.js for this error.

Support On Demand!