Table of Contents
When you are running Next.js application in development mode, you might have seen the following error in developer console:
In this article, let's see why it occurs and how to fix it.
Why does the warning occur?
Next.js renders the page in Server side and hydrates it in the client side. Once the hydration is done, it compares the HTML rendered in the client with the one sent from the server. If there is mismatch, you will see warnings like these in the console. If you see these kind of warning, that means someone has modified the HTML in the client side.
Who is responsible?
The main culprits here are browser extensions. Browser extensions modify the HTML to apply their own elements and styles. Few examples of the extensions are Grammarly, ColorZilla, and LanguageTool.
Based on the abbreviation used in the error, you can detect the extension: lt stands for LanguageTool, gr for Grammarly, and cz for ColorZilla.
How to prevent the warning
While the warning is not harmful, and you can safely ignore it.
If you still want to hide this warning, you can use the suppressHydrationWarning attribute in your HTML where the warning is occurring. In our case it will be added to the body tag:
1import "./globals.css";23export default function RootLayout({ children }) {4 return (5 <html lang="en">6 <body suppressHydrationWarning>7 <main>{children}</main>8 </body>9 </html>10 );11}
The
suppressHydrationWarningattribute is applied only for that particular element. If you are getting the warning for any other element, you have to pass the attribute there as well.
Do follow me on twitter where I post developer insights more often!