Search code examples
reactjsnext.jsnext-router

Why getting Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

I have a main layout which is rootLayout. And now i create the layout for blog which is BlogLayout but i don't know why i'm getting the errors. Is there a way to fix them ?

enter image description here

enter image description here

Solution

  • The issue is resolved.In route layout the navbar will come inside the body.

    import "./globals.css";
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <nav>Hey i'm main layout</nav>
        {children}
      </body>
    </html>
  );
}