Next.js Discord

Discord Forum

Nested Layout.tsx not taking effect

Answered
New Guinea Freshwater Crocodile posted this in #help-forum
Open in Discord
New Guinea Freshwater CrocodileOP
app/
├── layout.tsx              <-- this has the header and footer component
│                             
│                             
│
├── page.tsx                <-- main page
│
└── (dashboard)/            <-- route group
    ├── layout.tsx          <-- nested layout.tsx without header or footer component
    │                         
    │                         
    │
    └── dashboard/          <-- dashboard folder
        ├── edit/
        │   └── page.tsx    <-- URL: /dashboard/edit (uses (dashboard)/layout.tsx)
        ├── new/
        │   └── page.tsx    <-- URL: /dashboard/new (uses (dashboard)/layout.tsx)
        └── page.tsx

Hello, Ive given my project structure above. My problem is that:
- I have added Header and Footer components to my main layout.tsx aka RootLayout so they show up on every page.
- I do not need them on /dashboard/** pages.
- I tried using nested layouts, didnt work.
Answered by chisto
nested layout won't override or kill the root layout, they all will apply

you probably need 2 route groups to separate layouts
app/
├──(headerfooter)
    ├── page.tsx
    ├── layout.tsx  
├──(dashboard)
    ├── layout.tsx            
    │                         
    │                         
    │
    └── dashboard/         
        ├── edit/
        │   └── page.tsx   
        ├── new/
        │   └── page.tsx   
        └── page.tsx
View full answer

3 Replies

New Guinea Freshwater CrocodileOP
/app/layout.tsx:
import Footer from "@/components/navbar/Footer";
import Header from "@/components/navbar/Header";
import "./globals.css";
import { Widget } from "react-chat-widget";

import "react-chat-widget/lib/styles.css";


export const metadata = {
  title: "Al-Mahdia",
};

import { ReactNode } from "react";

export default function RootLayout({ children }: { children: ReactNode }) {

  return (
    <html lang="en">
      <head>
        <title>Al-Mahdia</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        {/* eslint-disable-next-line @next/next/no-page-custom-font */}
        <link
          href="https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
          rel="stylesheet"
        />
      </head>
      <body>
        <div className="min-h-screen bg-[var(--bg)]">
          <Header />
          <main className="mt-16">{children}</main>
        </div>
        {/* <Widget handleNewUserMessage={handleNewUserMessage} /> */}
        <Footer />
        <script
          src="//code.tidio.co/gnbmzya6xulbs4sjhnweos7amn0dl8do.js"
          async
        ></script>
      </body>
    </html>
  );
}

and /app/(dashboard)/layout.tsx:
import React from 'react'

export default function DashboardLayout({
    children
}: {
        children: React.ReactNode;
    }) {
    return (
        <>
            { children}
        </>
    )
}
chisto
nested layout won't override or kill the root layout, they all will apply

you probably need 2 route groups to separate layouts
app/
├──(headerfooter)
    ├── page.tsx
    ├── layout.tsx  
├──(dashboard)
    ├── layout.tsx            
    │                         
    │                         
    │
    └── dashboard/         
        ├── edit/
        │   └── page.tsx   
        ├── new/
        │   └── page.tsx   
        └── page.tsx
Answer