How to Solve React Hydration Error in Nextjs

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.