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:
- Using useEffect to run on the client only
- Disabling SSR on specific components
- Using suppressHydrationWarning
There is a dedicated information page on official site of Next.js for this error.
Support On Demand!
