Route Segments & Nested Routing
How URLs translate into layers of nested UI.
Segments and URLs
In web development, a URL is made up of route segments delimited by slashes. For example, in the URL /dashboard/settings, dashboard is a segment and settings is a nested segment.
In the Next.js App Router, these URL segments map directly to your folder structure. When you nest a settings folder inside a dashboard folder, you create a nested route.
Nested Routes = Nested UI
Nested routing isn't just about organizing files; it fundamentally controls how your UI is rendered. Next.js uses nested routes to automatically create nested UI layouts.
When a user navigates deeper into a URL, they aren't loading a completely new page. Instead, they are loading a smaller chunk of UI that fits inside the parent route's layout.
The {children} prop
If you have a layout.tsx file in your /dashboard folder, it acts as a wrapper. Any route nested inside /dashboard (like /dashboard/settings) will automatically be passed into that layout as the children prop.
This means your outer layout (like a sidebar or navigation bar) stays perfectly preserved and does not re-render when the user navigates between nested route segments.
Interactive Route Builder
Add URL segments below and watch how Next.js wraps the UI in corresponding layouts.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
- A URL is made up of segments that match your nested folder structure.
- Nested routes automatically result in nested UI layouts.
- A nested
page.tsxnever replaces its parent layouts; it renders inside them. - Wrap a folder name in parentheses
(folderName)to create a Route Group that doesn't affect the URL.
Done with this concept?
Mark it complete to track your progress. No login needed.