Topic 24 of 47
Nested Folder Routes
Overview
Nested routes are created by nesting folders inside each other. Each folder represents a URL segment. Next.js matches the deepest 'page.tsx' file that aligns with the URL path.
Syntax
bash
app/
├── blog/ # Segment 1: /blog
│ ├── page.tsx # Renders /blog
│ └── 2024/ # Segment 2: /blog/2024
│ ├── page.tsx # Renders /blog/2024
│ └── tech/ # Segment 3: /blog/2024/tech
│ └── page.tsx # Renders /blog/2024/techCommon Pitfalls
- Deeply nesting too many folders can make your project structure difficult to navigate. Use route groups (e.g., '(admin)') to organize without adding segments.
- Remember that params in Server Components are accessed via the `params` prop automatically passed to the page.
Real-World Example
Accessing dynamic segments in nested folders:
example
bash
// app/shop/[category]/[product]/page.tsx
// URL: /shop/shoes/nike-air
export default function ProductPage({
params,
}: {
params: { category: string; product: string };
}) {
return (
<div>
<p>Category: {params.category} (e.g., shoes)</p>
<p>Product: {params.product} (e.g., nike-air)</p>
</div>
);
}