Route Groups and Nested Layouts
Organize complex App Router projects using route groups, nested layouts, and template files for shared and per-section UI.
Route Groups and Nested Layouts is a free Next.js 15 Fullstack (App Router + Server Actions) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack (App Router + Server Actions) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Organization Matters
As an app grows, the App Router lets you structure folders for shared UI without affecting the URL. Route groups and nested layouts are the main tools.
Nested Layouts Recap
Each folder can have a layout.tsx. Layouts nest: a section layout wraps its pages while the root layout wraps everything.
export default function DashboardLayout({ children }) {
return (<section><nav>Dashboard nav</nav>{children}</section>);
}Route Groups
Wrapping a folder name in parentheses, like (marketing), creates a route group. It organizes files but is omitted from the URL.
Multiple Root Layouts
Route groups let you have different top-level layouts — for example, one for marketing pages and another for the app — by giving each group its own layout.
app/
(marketing)/layout.tsx
(marketing)/page.tsx
(app)/layout.tsx
(app)/dashboard/page.tsxURLs Stay Clean
Because (marketing) does not appear in the path, app/(marketing)/page.tsx still serves the URL /, not /marketing.
Template vs Layout
A template.tsx is like a layout but creates a new instance on every navigation, resetting state — useful for enter animations or per-route effects.
export default function Template({ children }) {
return <div className="fade-in">{children}</div>;
}When to Use Template
Use a template when you need state or effects to re-run on each navigation; use a layout when you want shared UI and state to persist across navigations.
Organizing Without Routing
You can also use route groups purely to colocate related routes under one folder without adding a URL segment, keeping the codebase tidy.
Shared UI in Layouts
Put navigation, sidebars, and providers in the nearest layout so they persist and avoid re-rendering on navigation within that section.
Loading and Error per Section
Each segment, including grouped ones, can have its own loading.tsx and error.tsx, scoping fallback UI precisely.
Putting It Together
A typical app: a (marketing) group with a public layout, an (app) group with an authenticated layout, each nesting further section layouts.
Quick Check
What does wrapping a folder name in parentheses do?
Recap
You learned to structure apps with nested layouts for persistent shared UI, route groups (name) that organize without changing URLs and allow multiple root layouts, and templates that remount on navigation.
Frequently asked questions
Is the “Route Groups and Nested Layouts” lesson free?
Yes — the full text of “Route Groups and Nested Layouts” is free to read here on the web, and the Next.js 15 Fullstack (App Router + Server Actions) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack (App Router + Server Actions) course, upgrade to CoddyKit PRO.
What will I learn in “Route Groups and Nested Layouts”?
Organize complex App Router projects using route groups, nested layouts, and template files for shared and per-section UI. You practise Next.js 15 Fullstack (App Router + Server Actions) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Next.js 15 Fullstack (App Router + Server Actions)?
No prior experience is required. Next.js 15 Fullstack (App Router + Server Actions) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Route Groups and Nested Layouts” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Next.js 15 Fullstack (App Router + Server Actions) lesson?
Yes. Every Next.js 15 Fullstack (App Router + Server Actions) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Layouts and Page Components
- Dynamic Routes & Params
- Loading & Error UI
- Route Groups and Nested Layouts