Nested Routes & Layouts

🔍 What Is It?

Nested routes are created by nesting folders in the app/ directory. Each folder can have:

• →layout.tsx — wraps all child routes, persists across navigation
• →page.tsx — the content for that exact route
• →loading.tsx — Suspense fallback for that route level
• →error.tsx — error boundary for that route level

Layout nesting: When you navigate to /dashboard/settings, Next.js renders:

RootLayout > DashboardLayout > SettingsPage

All layouts in the hierarchy wrap the page. Layouts higher in the tree persist — they do not re-mount on child navigation.

🎯 Why Do We Need It?

In the Pages Router era, implementing a persistent sidebar required complex workarounds: _app.tsx hacks, HOCs, or context. Every page had to manually include the sidebar.

Nested layouts solve this elegantly:

• →Define the sidebar once in a layout
• →All child routes automatically get the sidebar
• →Sidebar state (open/closed, scroll position) persists across navigation
• →Different sections of the app can have completely different layouts

🏗️ What Happens in Real Projects?

Nested layout architecture for a SaaS app:

app/
├── layout.tsx              # Root: html, body, fonts, analytics
├── (marketing)/
│   ├── layout.tsx          # Marketing: header, footer
│   ├── page.tsx            # Homepage
│   └── pricing/page.tsx    # Pricing page
├── (auth)/
│   ├── layout.tsx          # Auth: centered card layout
│   ├── login/page.tsx
│   └── register/page.tsx
└── (app)/
    ├── layout.tsx          # App: sidebar, topnav, auth guard
    ├── dashboard/page.tsx
    ├── orders/
    │   ├── layout.tsx      # Orders: breadcrumbs, filters
    │   ├── page.tsx        # /orders
    │   └── [id]/page.tsx   # /orders/123
    └── settings/
        ├── layout.tsx      # Settings: sub-navigation tabs
        ├── page.tsx        # /settings
        └── billing/page.tsx # /settings/billing

⚙️ How It Works

Layout rendering and persistence:

1. User navigates to /dashboard
2. Next.js renders: RootLayout > AppLayout > DashboardPage
3. User navigates to /orders
4. Next.js renders: RootLayout > AppLayout > OrdersLayout > OrdersPage
5. RootLayout and AppLayout do NOT re-mount — they persist
6. Only DashboardPage is replaced with OrdersLayout + OrdersPage

This is the key difference from the Pages Router: layouts are part of the React tree and maintain their state (scroll position, open modals, focus) across child navigations.

💻 Example

Nested Layout Architecture — A complete nested layout setup for a SaaS dashboard with auth, sidebar, and sub-navigation.

import { redirect } from 'next/navigation';
import { getSession } from '@/lib/auth';
import { Sidebar } from '@/components/Sidebar';
import { TopNav } from '@/components/TopNav';

export default async function AppLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Auth check in layout — protects all child routes
  const session = await getSession();
  if (!session) redirect('/login');

  return (
    <div className="flex h-screen bg-gray-50">
      <Sidebar user={session.user} />
      <div className="flex flex-col flex-1 overflow-hidden">
        <TopNav user={session.user} />
        <main className="flex-1 overflow-auto p-6">
          {children}
        </main>
      </div>
    </div>
  );
}

🤔 Common Confusions

🚨 Common Production Issues

✅ Best Practices

🏛️ Architect's Note

💬 Frequently Asked Questions

🎯 Key Takeaways

🔗 Related Topics

🎯 Practice this topic in interviews

↗ Where this topic fits