Next.js App Router : comprendre son fonctionnement et bien l’utiliser

Le Next.js App Router a profondément changé la façon de structurer une application développée avec Next.js. Introduit avec Next.js 13 puis progressivement devenu l’approche recommandée pour les nouveaux projets, il repose sur l’architecture du dossier app, les Server Components de React, le routing basé sur les fichiers et une gestion plus intégrée du rendu et des données.

Pour un développeur habitué au Pages Router, la transition peut toutefois demander un temps d’adaptation. Certaines habitudes changent : les composants sont serveur par défaut, getServerSideProps et getStaticProps ne sont plus utilisés de la même manière, et la gestion des layouts, du chargement ou des erreurs devient directement liée à la structure des fichiers.

L’objectif n’est donc pas simplement de connaître la syntaxe de l’App Router Next.js. Il faut comprendre pourquoi cette architecture existe, comment elle fonctionne et dans quels cas utiliser chaque mécanisme.

Qu’est-ce que le Next.js App Router ?

Le Next.js App Router est le système de routage et d’architecture introduit dans Next.js pour construire des applications modernes à partir du dossier app.

Contrairement à l’ancien Pages Router basé sur pages/, l’App Router permet de définir directement dans l’arborescence du projet :

• les routes ;
• les layouts ;
• les pages ;
• les états de chargement ;
• les pages d’erreur ;
• les réponses 404 ;
• les endpoints API avec Route Handlers ;
• les composants serveur et client ;
• certaines parties de la gestion des métadonnées.

Une structure simple peut ressembler à ceci :

app/
├── layout.tsx
├── page.tsx
├── about/
│   └── page.tsx
├── blog/
│   ├── page.tsx
│   └── [slug]/
│       └── page.tsx
├── dashboard/
│   ├── layout.tsx
│   └── page.tsx
├── loading.tsx
├── error.tsx
└── not-found.tsx