Next.js App Router

React 🟡 Mid

Définition

Système de routage Next.js fondé sur le système de fichiers, avec Server Components par défaut, layouts imbriqués et conventions (page, layout, loading, error). Version stable actuelle : Next.js 16.3 (3 août 2026) ; Next.js 16 (21 octobre 2025) a rendu Turbopack bundler par défaut, exige Node.js 20.9+, impose l'accès asynchrone à params, searchParams, cookies() et headers(), et exige un fichier default.js pour chaque slot de route parallèle.

Analogie

Comme un immeuble ou chaque dossier est un étage et chaque fichier est une pièce avec un role précis.

Exemple de code

// app/users/[id]/page.tsx
export default async function UserPage({ params }) {
  const { id } = await params;
  const user = await getUser(id);
  return <h1>{user.name}</h1>;
}
// app/users/[id]/loading.tsx -> Suspense automatique
// app/users/[id]/error.tsx -> Error Boundary auto

Cas d'usage

Applications React full-stack avec SSR, RSC, routing et API integres.

Anti-pattern

Lire params ou searchParams de façon synchrone (supprimé en Next.js 16) ; laisser un middleware.ts déprécié au lieu de proxy.ts.

Termes liés

#nextjs#interview#framework

En entretien

Explique-moi comment fonctionne l'App Router de Next.js.
C'est un système de routage fondé sur le système de fichiers, avec Server Components par défaut, layouts imbriqués et des conventions comme page, layout, loading, error, comme un immeuble où chaque dossier est un étage et chaque fichier une pièce avec un rôle précis. Les fichiers loading.tsx et error.tsx donnent respectivement un Suspense et un Error Boundary automatiques.
Quel piège as-tu en tête avec Next.js 16 et l'App Router ?
Depuis Next.js 16 (21 octobre 2025), l'accès à params, searchParams, cookies() et headers() est devenu asynchrone, donc les lire de façon synchrone est supprimé et fait planter le code. Il faut aussi éviter de garder un middleware.ts déprécié au lieu de passer à proxy.ts.

Dans l'actu

06/10 Next.js 16.4 fait des Cache Components le modèle recommandé pour toutes les apps : create-next-app les active désormais par défaut, le nouvel export ensureStatic fait échouer le build si du contenu dynamique s'invite dans une rout… Semaine 41 (1re moitié) · 5 – 7 octobre 2026 →

Sources

Fiche mise à jour le 2026-09-27