Help related to nested layouts

Question

Hello, I need help with nested layouts, i am still getting the hang of it, basically this is what my file structure looks like right now.

I am trying to create a different layout only for my homepage. But after I do it like this I get hydration errors and weird behaviour. Some pages i have two navbars and two footers, some pages only one footer with no navbar. This is all fixed when I move the page.tsx back where it was (second image). Can I get some help figuring this out?

Sun bear · Answer

In your root layout you have to include all the <html><body> and so on.

In the (home)/layout.tsx you can do it like that:

import Navbar from "@/components/layout/navbar";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
    </>
  );
}

It could also make sense to split your app like

app
- (home)
- (other)

{children}

); }It could also make sense to split your app likeapp - (home) - (other)

Help related to nested layouts

2 Replies