Next.js Nested Routes

Nested routes let you build pages that sit inside other pages in your URL structure. A URL like /dashboard/settings/profile has three levels of nesting. Next.js handles this by mirroring the URL structure in your folder structure.

What Nested Routes Look Like

Every forward slash in a URL represents a folder level in your project. The deeper you nest folders, the deeper the URL becomes.

URL: /dashboard/settings/profile

Folder structure:
app/
  dashboard/
    settings/
      profile/
        page.js

A Real-World Example: Admin Panel

Imagine building an admin panel. It has a dashboard, a users section, and a reports section. Each section has its own sub-pages.

app/
  admin/
    page.js                   → /admin
    users/
      page.js                 → /admin/users
      [id]/
        page.js               → /admin/users/42
    reports/
      page.js                 → /admin/reports
      monthly/
        page.js               → /admin/reports/monthly

Diagram: Nested Folders = Nested URLs

FOLDER DEPTH          URL
─────────────────────────────────────────
app/                →  /
app/admin/          →  /admin
app/admin/users/    →  /admin/users
app/admin/users/42/ →  /admin/users/42

Layouts in Nested Routes

Each level of nesting can have its own layout.js. This layout wraps only the pages inside that folder. Layouts at outer levels wrap layouts at inner levels — they stack on top of each other.

app/
  layout.js            ← Root layout (wraps everything)
  admin/
    layout.js          ← Admin layout (wraps /admin/* only)
    page.js
    users/
      layout.js        ← Users layout (wraps /admin/users/* only)
      page.js

How Layouts Stack

When visiting /admin/users:

┌─────────────────────────┐
│   Root Layout (app/)    │
│  ┌───────────────────┐  │
│  │  Admin Layout     │  │
│  │  ┌─────────────┐  │  │
│  │  │ Users Page  │  │  │
│  │  └─────────────┘  │  │
│  └───────────────────┘  │
└─────────────────────────┘

The root layout holds the site header and footer. The admin layout holds the admin sidebar. The users page holds the table of users. All three layers appear together.

Route Groups: Organizing Without Affecting URLs

Sometimes you want to group files in folders for organization, but you do not want those folder names to appear in the URL. Wrap the folder name in parentheses to create a route group.

app/
  (marketing)/
    about/
      page.js          → /about   (not /marketing/about)
    contact/
      page.js          → /contact (not /marketing/contact)
  (shop)/
    products/
      page.js          → /products
    cart/
      page.js          → /cart

The parentheses tell Next.js to ignore the folder name in the URL. This keeps your code organized without changing the URL structure.

Diagram: Route Groups

FOLDER: app/(marketing)/about/page.js
URL:    /about   ← (marketing) is invisible in the URL

FOLDER: app/(shop)/cart/page.js
URL:    /cart    ← (shop) is invisible in the URL

Shared Layouts for Route Groups

Route groups can have their own layouts. This lets you apply a layout to a group of pages without affecting other pages.

app/
  (marketing)/
    layout.js        ← Applies only to about and contact pages
    about/page.js
    contact/page.js
  (shop)/
    layout.js        ← Applies only to products and cart pages
    products/page.js
    cart/page.js

Key Takeaway

Nested routes mirror your URL structure inside the app/ folder. Each folder level adds a URL segment. Use layout.js at each level to share UI across related pages. Use parentheses around folder names to group pages for organization without affecting the URL.