Next.js
/Beginner
Nested Routes
Definition
Creating hierarchical routes by nesting folders inside each other, allowing for complex URL structures and shared layouts.
Explain Like I'm New
Just like folders on your computer. A `/blog/2024/tech` route is just a folder inside a folder inside a folder. The superpower is that you can put a `layout.tsx` at the `/blog` level, and it will wrap around ALL the nested folders automatically.
Real World Example
A Dashboard application where `/dashboard`, `/dashboard/settings`, and `/dashboard/billing` all share the exact same Sidebar component without writing it 3 times.
Common Use Cases
- •Dashboards
- •Multi-step wizards
- •Hierarchical data (Categories/Subcategories)
Terminal Output
bash / terminal
/*
Visualizing Nested Layouts:
app/
├── layout.tsx <-- Root Layout (Navbar & Footer applied to everything)
├── page.tsx
└── dashboard/
├── layout.tsx <-- Dashboard Layout (Adds a Sidebar just for dashboard routes)
├── page.tsx
└── settings/
└── page.tsx <-- This page gets BOTH the Root Navbar AND the Dashboard Sidebar!
*/
Interview Questions
basic
- How do you create a nested route representing `/dashboard/analytics`?
intermediate
- If you put a `layout.tsx` in the `app/dashboard` folder, does it affect the homepage (`app/page.tsx`)?