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.