Layouts: The Backbone of Next.js App Router
In the App Router, layouts are persistent components that wrap pages and preserve state during navigation. Understanding how they compose is essential for building efficient applications.
0:00
0% complete
LearnStep 1 of 4
Understanding the Layout Hierarchy
Learning Objectives
- •Understand how nested layouts work
- •Use route groups for organization
- •Implement shared layouts efficiently
- •Handle layout-level data fetching
Lesson Outline
LearnStep 1/4
Understanding the Layout Hierarchy
How Nesting Works
When rendering /dashboard/analytics, Next.js composes:
tsx
Key Insight: Parent layouts DO NOT re-render when navigating between child pages. Only the changed segment re-renders.
Layout Implementation
tsx
Layout vs Template
| Layout | Template |
|---|---|
| Persists state between navigations | Creates new instance on every navigation |
| Does not re-mount | Re-mounts on every route change |
| Use for: sidebars, navbars, shared UI | Use for: analytics, animations, per-page effects |
tsx