Nested and Shared Layouts

Composing Layouts for Different Sections

Layouts nest automatically. A layout.tsx inside src/app/dashboard/ wraps only the dashboard routes. It itself is wrapped by the root layout. This lets you build section-specific shells — a sidebar for /dashboard, a different header for /docs — while keeping the global shell in the root layout.

src/app/
  layout.tsx          <- wraps everything
  page.tsx
  dashboard/
    layout.tsx        <- wraps /dashboard/*
    page.tsx
    settings/
      page.tsx

// src/app/dashboard/layout.tsx
import type { ReactNode } from "react";
import Sidebar from "@/components/Sidebar";

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  );
}

Route groups let you share a layout without adding a URL segment. Placing (auth)/login/page.tsx and (auth)/register/page.tsx under (auth)/layout.tsx gives both pages the same centered card layout without a /auth/ prefix in the URL.