Topic 6 of 39
Nested Routes
Overview
Nested routing allows you to create hierarchical URL structures by nesting folders within each other. This naturally maps to UI hierarchies and allows nested layouts to wrap specific sections of your app.
Syntax
bash
app/
└── dashboard/ # /dashboard
├── page.tsx
├── settings/ # /dashboard/settings
│ └── page.tsx
└── analytics/ # /dashboard/analytics
└── page.tsxCommon Pitfalls
- Over-nesting folders unnecessarily, making the project structure difficult to maintain.
- Forgetting that layouts in parent folders automatically wrap the pages in nested folders.
Interview Questions
Q:
How do layouts interact with nested routes in Next.js?
A:
A layout defined in a parent segment will automatically wrap all page.tsx files in its nested child segments. This enables persistent UI like sidebars across nested routes.
Real-World Example
A nested layout where the dashboard sidebar persists while navigating between settings and analytics.
example
bash
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<aside>Dashboard Sidebar</aside>
<main className="flex-1">{children}</main>
</div>
);
}Check Your Knowledge
Test your understanding of Nested Routes with these quick questions.