Next.js Discord

Discord Forum

Layout from root getting brought down to child layout

Answered
Ocicat posted this in #help-forum
Open in Discord
OcicatOP
My Layout in fumotest is getting duplicate layouts.

Root
-Layout
-Page
->fumotest
--page
--Layout

My page in fumotest
/fumotest
is getting layout from both root and page name

So its getting imported as
<Header>
<FumoHeader>
see image for reference.

Why? This never happened in previous version.
Might be changes in version but open to all help.

Thank you.

Root layout.jsx
import { Inter } from "next/font/google";
import "./globals.css";
import Header from "@/components/Header";
import SessionWrapper from '@/components/SessionWrapper';


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

export const metadata = {
  title: "Insta Clone app",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <SessionWrapper>
    <html lang="en">
      <body className={inter.className}>
        <Header />
        {children}
      </body>
    </html>
    </SessionWrapper>
  );
}


/fumotest/layout.jsx
import "../globals.css";
import FumoHeader from "@/components/FumoHeader";


export const metadata = {
  title: "Fumo test Clone app",
  description: "Generated by create next app",
};

export default function FumoLayout({ children }) {
  return (    
      <div>
        <FumoHeader />
        {children}
      </div>
  );
}
Answered by joulev
app/
  layout.tsx
  fumotest/
    layout.tsx
    page.tsx

you meant the page file here takes both layouts? that's the intended behaviour and it's been like that since the very first release of the app router
View full answer

17 Replies

Answer
Double-striped Thick-knee
@Ocicat it's expected behavior, your root layout will be present in all the child components, that's the point of layout.
OcicatOP
Thank you
You guys are much better than the docs.

Would this work?
app
->(content)
--page
--layout
->(dashboard)
--page
--layout
->(reports)
--page
--layout
->(landingpage)
--page
--layout

Will this work?

Essentially I am asking how to make separate layouts for each page? If that's even possible?
@Double-striped Thick-knee yeah it will work, you will get different layouts for each part of your app
OcicatOP
Thank you very much.
I better understand now
@Wool sower gall maker why do we use () and [] since we can create just a folder name.
Double-striped Thick-knee
we use () to group or separate the layouts, and [] for dynamic routing
https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes
Double-striped Thick-knee
app/
  (dashboard)
    layout.tsx
    settings/
      page.tsx -> renders through dashboards layout.tsx
    account/
      page.tsx -> renders through dashboards layout.tsx
  (home)
    layout.tsx
    page.tsx -> renders through homes layout.tsx
    anotherRoute/
      page.tsx -> renders through homes layout.tsx
@Wool sower gall maker sry if it looks confusing
Wool sower gall maker
no, it's very good
but what would happen if we remove () and just write folder name
Double-striped Thick-knee
currently these are the routes with ()

/settings
/account

/
/anotherRoute

without (), it will be
/dashboard/settings
/dashboard/account

/home
/home/anotherRoute
@Wool sower gall maker with (), you can use separate layouts for different parts of your application, and it wont act like a route itself
Wool sower gall maker
Oh, now I understand. Thanks a lot 😆
Asian black bear
Even tho I'm using parenthesis It's still picking up parents layout
@Asian black bear Even tho I'm using parenthesis It's still picking up parents layout
Jboncz
Hiya, this post is closed as the issue is resolved if you need futher assistance with understanding how the route groups work you can check out https://nextjs.org/docs/app/building-your-application/routing/route-groups or open a new thread on the help-forum 🙂