# Next.js App Router : guide complet pour débutants (2026)
Depuis Next.js 13, le App Router a remplacé le Pages Router comme standard. En 2026 avec Next.js 16, c'est la seule façon de construire des apps React modernes à pleine puissance.
## Pourquoi le App Router ?
Le Pages Router était simple mais limité :
- Pas de layouts imbriqués natifs
- Data fetching côté serveur complexe
- Pas de streaming
Le App Router résout tout ça nativement.
## Structure de base
```
app/
├── layout.tsx # Layout racine (HTML, body)
├── page.tsx # Page d'accueil
├── about/
│ └── page.tsx # /about
└── blog/
├── layout.tsx # Layout partagé pour /blog/*
├── page.tsx # /blog
└── [slug]/
└── page.tsx # /blog/mon-article
```
Publicité
Espace publicitaire
## Server Components vs Client Components
**Par défaut, tout est Server Component** — rendu côté serveur, zéro JavaScript envoyé au navigateur.
Vous avez besoin d'interactivité ? Ajoutez `'use client'` en tête de fichier.
```tsx
// Server Component (par défaut)
async function ArticleList() {
const articles = await db.article.findMany(); // DB directe !
return
- {articles.map(a =>
- {a.title} )}
Publicité
Espace publicitaire
## FAQ
**Q: Dois-je migrer depuis le Pages Router ?**
Non, si votre projet tourne bien, il n'y a pas d'urgence. Mais pour tout nouveau projet, utilisez l'App Router.
**Q: Les Server Actions, c'est quoi ?**
Des fonctions server-side appelables depuis le client sans API route. Parfait pour les formulaires.