The App Router is Next.js's modern routing system built on React Server Components. Here's how to use it effectively.
File-Based Routing#
app/
├── page.tsx # / (home)
├── layout.tsx # Root layout
├── loading.tsx # Loading UI
├── error.tsx # Error boundary
├── not-found.tsx # 404 page
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
├── (marketing)/ # Route group (no URL impact)
│ ├── layout.tsx
│ ├── pricing/
│ │ └── page.tsx # /pricing
│ └── features/
│ └── page.tsx # /features
└── api/
└── users/
└── route.ts # /api/users
Pages and Layouts#
Loading code block...
Server Components (Default)#
Loading code block...
Client Components#
Loading code block...
Data Fetching#
Loading code block...
Loading and Error States#
Loading code block...
Dynamic Routes#
Loading code block...
Server Actions#
Loading code block...
Route Handlers (API Routes)#
Loading code block...
Metadata#
Loading code block...
Best Practices#
Components:
✓ Default to Server Components
✓ Use Client Components only for interactivity
✓ Keep client bundles small
✓ Colocate data fetching with components
Data:
✓ Fetch in parallel when possible
✓ Use appropriate caching strategies
✓ Revalidate on mutations
✓ Handle loading and error states
Structure:
✓ Use route groups for organization
✓ Share layouts effectively
✓ Use loading.tsx for streaming
✓ Implement proper error boundaries
Conclusion#
The App Router brings powerful patterns with Server Components, streaming, and server actions. Default to server components, use client components for interactivity, and leverage the built-in caching and revalidation system. Structure your routes with layouts and route groups for maintainable applications.