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

C'est comme organiser un bâtiment par étages avec halls communs et portes de secours par niveau : chaque dossier définit une zone de l’URL avec ses règles propres. L’App Router mappe les segments d’URL aux dossiers sous `app/` ; les fichiers `layout.tsx`, `page.tsx`, `loading.tsx`, `error.tsx` structurent l’expérience par route. Il privilégie les React Server Components pour réduire le JS envoyé au navigateur et s’intègre aux [Server Actions](/lexique/server-actions), aux Route Handlers ([API routes](/lexique/api-route-next-js)) et au déploiement [edge](/lexique/edge-runtime) selon configuration.

Chaque route est un segment ; les layouts enveloppent les segments enfants ; `page.tsx` fournit l’UI feuille ; les données passent par fetch serveur ou loaders. Les boundaries `loading` et `error` isolent les états. Le streaming HTML peut commencer avant la fin des requêtes lentes. Compatible [SSR](/lexique/ssr-server-side-rendering), [SSG](/lexique/ssg-static-site-generation) et [ISR](/lexique/isr-incremental-static-regeneration) selon exports et options.

Les équipes qui migrent du Pages Router vers l’App Router rapportent souvent des gains sur la taille du bundle client et une meilleure composition des données côté serveur — à mesure que les composants serveur remplacent du fetching client redondant, on observe couramment des réductions de dizaines de pourcents de JS sur les pages marketing, selon complexité initiale.

• Server Components par défaut ; `'use client'` pour interactivité locale ; une source de vérité pour les données serveur ; tests des layouts imbriqués ; documentation des conventions d’équipe.

• Marquer trop de composants `'use client'` par habitude — annulant les gains serveur. Mélanger modèles mental Pages et App (data fetching). Ignorer la sémantique du cache Next 13+.