⚡ Comparatif entre app/ et pages/ dans Next.js
Depuis Next.jsNext.js
Framework React créé par Vercel, offrant SSR, SSG, routage et optimisations intégrées. 13, un nouveau système de routage appelé App RouterApp Router
Système de routage de Next.js basé sur le dossier `app/`, supportant layouts et Server Components. (app/) est introduit, en remplacement progressif du Pages Router (pages/). Voici un comparatif détaillé entre ces deux approches, basé sur la gestion des fichiers et des fonctionnalités.
📁 Structure des fichiers : Pages Router (pages/) vs App Router (app/)
La structure des fichiers entre ces deux approches diffère principalement dans l’organisation des routes et la gestion des layouts.
👎 Ancienne approche (pages/)
Dans le système pages/, chaque fichier correspondait directement à une route :
/pages
├── index.js // Page d'accueil ("/")
├── about.js // Page "/about"
├── contact.js // Page "/contact"
├── _app.js // Layout global (appliqué partout)
├── _document.js // Personnalisation de la structure HTML
├── api/ // API Routes
│ ├── hello.js // API: "/api/hello"👍 Nouvelle approche (app/)
Avec app/, le routing est basé sur les dossiers, et l’utilisation des Server Components optimise les performances :
/app
├── layout.tsx // Layout global
├── page.tsx // Page d'accueil ("/")
├── about/
│ ├── page.tsx // Page "/about"
│ ├── legal.md // Exemple de contenu markdown
├── contact/
│ ├── page.tsx // Page "/contact"
├── api/ // API Routes remplacées par Server ActionsRemarque : layout.tsx est appliqué automatiquement aux sous-pages sans avoir besoin de _app.js comme dans pages/.
🛠️ Principales différences entre pages/ et app/
| Fonctionnalité | Pages Router (pages/) | App Router (app/) |
|---|---|---|
| Routing | Basé sur les fichiers | Basé sur les dossiers |
| Layouts | _app.js global | layout.tsx par dossier |
| Data Fetching | getStaticProps, getServerSideProps | Fetching natif dans Server Components |
| Composants par défaut | Client Components | Server Components (par défaut) |
| Gestion des API | API Routes (/api/*) | Server Actions (via formulaires et mutations) |
| SEO (Metadata) | next/head | generateMetadata() |
🚀 Avantages de l’App Router (app/)
✅ Meilleures performances grâce aux Server Components (moins de JavaScript envoyé au client).
✅ Layouts plus flexibles (possibilité d’avoir des layouts imbriqués par dossier).
✅ SEOSEO
Search Engine Optimization – ensemble de techniques pour améliorer la visibilité d'un site dans les moteurs de recherche. et métadonnées simplifiés avec generateMetadata().
✅ Suppression des APIAPI
Application Programming Interface – interface permettant à deux applications de communiquer entre elles. Routes au profit des Server Actions, qui permettent d’interagir directement avec une base de données depuis un composantcomposant
Bloc réutilisable d'interface utilisateur dans React, défini comme une fonction ou une classe..
✅ Gestion simplifiée des erreurs et du chargement (loading.tsx et error.tsx par dossier).
🎯 Conclusion
Si vous démarrez un projet aujourd’hui, l’App Router (app/) est recommandé pour bénéficier des dernières avancées en termes de performance et d’architecture. Toutefois, le Pages Router (pages/) reste toujours supporté et peut être utile pour une transition progressive.
Tu veux un exemple de code concret pour mieux illustrer la différence entre les deux ? 😊