import NavBar from '@/components/navbar' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) }export default function Page() { return <>Home Page }export default function NavBar() { return <>Navbar }These are the only files, why am i still getting a hydration error?

moving inside the body fixed it

Hydration error

Answered

Cimarrón Uruguayo posted this in #help-forum

Cimarrón UruguayoOP

2024-10-31T20:12:52.361Z

import NavBar from '@/components/navbar'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <NavBar />
      <body>{children}</body>
    </html>
  )
}

export default function Page() {
  return <>Home Page</>
}

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

These are the only files, why am i still getting a hydration error?

Answered by Cimarrón Uruguayo

moving <NavBar /> inside the body fixed it

View full answer

12 Replies

Anay-208

2024-10-31T20:13:26.927Z

Can you first try on icogonito?

I heard it happens due to extension sometimes

Cimarrón UruguayoOP

2024-10-31T20:14:31.523Z

nah

i think i found the issue

but idk why its the issue

Cimarrón UruguayoOP

2024-10-31T20:14:59.492Z

moving <NavBar /> inside the body fixed it

Answer

Anay-208

2024-10-31T20:15:16.563Z

Wait, Navbar is supposed to be inside body only

I didn't notice it

You can mark this as a solution

Cimarrón UruguayoOP

2024-10-31T20:42:25.372Z

why

Anay-208

2024-10-31T21:01:51.723Z

All Visual elements are supposed to be inside body

Cimarrón UruguayoOP

2024-10-31T21:02:27.112Z

thanks