Hydration Failed Because The Server Rendered Html Didn't Match The Client

If you faced "Hydration failed because the server rendered HTML didn't match the client" in next js here is a simple solution for that.

If you are using next-themes you might seen this error. You can basically add "suppressHydrationWarning" html attribute in your html tag to avoid the error.

You might also see hydration error because of the extensions you have in your browser. If the solution didn't fix your error you might also take a look your extensions.

Open your app/layout.tsx/jsx file and add "suppressHydrationWarning" html attribute in your html tag:

<html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <ThemeProvider enableSystem={true} attribute="class">
          <Header />

          {children}
        </ThemeProvider>
      </body>
    </html>

Next Js

Next Themes

Hydration Error

Comments (0)