Nested Routing in Next.js

Nested routing allows you to create routes inside other routes by nesting folders in the app directory. Each folder represents a level in the URL structure.

What is Nested Routing?

In Next.js, nested routing means organizing routes in a hierarchical folder structure where child routes live inside parent routes.

app/
 ├── page.js                → /
 ├── dashboard/
 │   ├── page.js            → /dashboard
 │   ├── settings/
 │   │   └── page.js        → /dashboard/settings
 │   └── profile/
 │       └── page.js        → /dashboard/profile

How Nested Routing Works

Each nested folder adds a new segment to the URL. The page inside that folder becomes accessible at the corresponding path.

Real World Example

Think of nested routing like folders on your computer.

A main folder contains subfolders, and each subfolder has its own path.

Documents/
 ├── Work/
 │   ├── Reports/
 │   └── Invoices/

Similarly, Next.js builds URLs based on nested folders.

Nested Routing with layout.js

Nested routing works closely with nested layouts. A layout applies to all pages inside its folder.

app/dashboard/layout.js   → Dashboard layout
app/dashboard/page.js     → Dashboard home
app/dashboard/settings/page.js

Why Nested Routing is Important

Nested routing helps organize large applications, improves code readability, and allows you to reuse layouts efficiently.