Next.js Discord

Discord Forum

Hydration error

Answered
Cimarrón Uruguayo posted this in #help-forum
Open in Discord
Cimarrón UruguayoOP
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

"use php"
Can you first try on icogonito?
I heard it happens due to extension sometimes
Cimarrón UruguayoOP
nah
i think i found the issue
but idk why its the issue
Cimarrón UruguayoOP
moving <NavBar /> inside the body fixed it
Answer
"use php"
Wait, Navbar is supposed to be inside body only
I didn't notice it
@Cimarrón Uruguayo moving <NavBar /> inside the body fixed it
"use php"
You can mark this as a solution
@"use php" Wait, Navbar is supposed to be inside body only
Cimarrón UruguayoOP
why
@Cimarrón Uruguayo why
"use php"
All Visual elements are supposed to be inside body
Cimarrón UruguayoOP
thanks