Next.js Layouts Cheat Sheet

What is a Layout?

Layouts are React components that wrap pages — used for shared UI, like navbars, footers, sidebars, etc.

1. Basic Layout Setup

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}

This layout wraps all routes under app/

2. Nested Layouts

Create sub-layouts in route folders:

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

→ Wraps all pages in /dashboard/*

3. Optional Layout Segments

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
  return <div className="marketing">{children}</div>;
}

Use parentheses () to group layouts without affecting the URL.

4. Shared Layout Elements

If you want to keep state (e.g., a sidebar toggle), use:

export const dynamic = 'force-static'; // or 'force-dynamic'
export const revalidate = 0; // or a number for ISR

5. Layouts + Pages Example

app/
├── layout.tsx          # Root layout (Header, Footer)
├── page.tsx            # Home page
├── dashboard/
│   ├── layout.tsx      # Sidebar layout
│   └── page.tsx        # /dashboard
├── (auth)/
│   ├── layout.tsx      # Special layout (e.g., no header)
│   └── login/
│       └── page.tsx    # /login