Next.js Discord

Discord Forum

Hydration failed because the initial UI does not match

Unanswered
Mini Lop posted this in #help-forum
Open in Discord
Mini LopOP
I have just started a very new project and I get an Hydration error with a very simple setup. I can't really understand what's going on.

This is my layout.tsx
import type { Metadata } from "next";
import { Averia_Serif_Libre } from "next/font/google";
import "./globals.css";
import Navbar from "@/components/Navbar";

const inter = Averia_Serif_Libre({ subsets: ["latin"], weight:"400" });

export const metadata: Metadata = {
  title: "Test",
  description: `Test`,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Navbar />
      <body className={inter.className}>{children}</body>
    </html>
  );
}


This is the main page.tsx file in the app folder

'use server'

export default async function Home() {
  return (
    <main>
      <div>Test</div>
    </main>
  );
}


And this is the Navbar.tsx component (if I remove this, the error disappears)

'use client'

export default function Navbar() {
  return (
    <div>
      Test
    </div>
  )
}


Any idea of what might be happening?

The full error is this

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <html>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

9 Replies

Cape lion
hi ,
what command did you use to start the project?
Mini LopOP
npx create-next-app@latest
and hi 🙂
Cape lion
hi,
I've just ran the exact command
and yes for all prompt before creating the project
works smootly
what's your node version
and next version?
Mini LopOP
next version is the latest (14.1.3), node version is v20.11.1
Asian paper wasp
I'm guessing the browser is trying to auto correct the fact that your NavBar is not within the body tag.

Try to move it within the body tag and see if the error is still showing up
Mini LopOP
Do you believe me if I tell you that I had NO idea I placed it outside the body tag?? Of course it works now... Thanks a lot @Asian paper wasp !!! And sorry everyone for bothering with such a silly mistake!