Nested Layouts and Route Groups
Structure your application with nested layouts and organize routes using route groups for better modularity.
Nested Layouts: Shared UI
Welcome! In this lesson, we'll explore two powerful App Router features: Nested Layouts and Route Groups.
Nested layouts allow you to share UI components (like headers, sidebars, or footers) across multiple pages within a specific segment of your application. This helps maintain consistency and reduces code duplication.
How Layouts Work
In Next.js 15 App Router, layouts are defined by creating a layout.tsx file inside a folder.
- A layout component receives a
childrenprop, which will be the content of the nested route segments (e.g.,page.tsxor other nested layouts). - Layouts are rendered hierarchically, meaning an outer layout wraps an inner layout.
All lessons in this course
- Dynamic Routes and Catch-all Segments
- Nested Layouts and Route Groups
- Parallel and Intercepting Routes
- Loading and Error UI Conventions