Nested Routes
Nest folders to build deeper URLs like /blog/posts/first.
To create nested URLs, nest folders inside app/. Each level adds a segment to the path. Only the folders that contain a page.tsx become actual pages.
Example mapping
| File | URL |
|---|---|
| app/page.tsx | / |
| app/shop/page.tsx | /shop |
| app/shop/cart/page.tsx | /shop/cart |
Example
// app/shop/cart/page.tsx -> /shop/cart
export default function CartPage() {
return <h1>Your cart</h1>;
}When to use it
- A blog site creates app/blog/posts/[slug]/page.tsx for three-level-deep individual post URLs.
- A settings area nests app/settings/profile/page.tsx and app/settings/billing/page.tsx under a shared parent.
- A docs site mirrors its folder tree under app/docs/ to produce readable, hierarchical URLs automatically.
More examples
Three-level folder nesting
Folders nest to build multi-segment URLs without any route configuration.
app/
└── blog/
└── posts/
└── page.tsx # → /blog/postsNested page component
The page at app/blog/posts/page.tsx is reached at exactly the path /blog/posts.
// app/blog/posts/page.tsx
export default function PostsPage() {
return (
<div>
<h1>All Posts</h1>
<p>URL: /blog/posts</p>
</div>
);
}Layouts at each nesting level
Placing layout.tsx at app/blog/ makes the blog nav wrap every route under /blog without repetition.
// app/blog/layout.tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
return (
<>
<nav>Blog nav</nav>
{children}
</>
);
}
Discussion