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.

Need Help With React Development?

Work with our skilled React developers to accelerate your project and boost its performance.

Hire Reactjs Developers

Support On Demand!

Related Q&A