Next.js: Comprendre les Répertoires `app` et `pages`

Dans Next.js, les répertoires app et pages sont utilisés pour organiser les fichiers de votre projet, mais ils fonctionnent différemment et sont associés à différentes approches de gestion des routes. Voici les différences principales :

1. Répertoire `pages` (Legacy Routing System)

Le répertoire pages est la méthode historique (et toujours supportée) pour définir les routes dans un projet Next.js. Chaque fichier dans ce répertoire correspond automatiquement à une route de votre application.

Caractéristiques principales :

Convention de nommage :
- pages/index.js → Route /
- pages/about.js → Route /about
- pages/blog/[slug].js → Route dynamique /blog/:slug
Routeur basé sur des fichiers : Les noms des fichiers et des dossiers dans pages définissent directement les URLs.
getStaticProps/getServerSideProps :
- Utilisé pour récupérer des données au moment du rendu (statique ou côté serveur).
API Routes :
- Vous pouvez créer des endpoints API en plaçant des fichiers dans pages/api, par exemple :
  - pages/api/hello.js → API route /api/hello
Rendu CSR/SSR/SSG facile :
- Next.js gère différentes méthodes de rendu (CSR, SSR, ou SSG) dans ce répertoire.

2. Répertoire `app` (App Directory – Nouveau système avec le `Layout Router`)

Introduit dans Next.js 13, le répertoire app propose une nouvelle manière de structurer et de gérer les routes avec une approche basée sur des layouts et des React Server Components.

Caractéristiques principales :

Structure modulaire avec des layouts :
- Le répertoire app est conçu pour gérer les layouts imbriqués et partagés. Par exemple :
  - app/layout.js définit le layout principal pour toute l’application.
  - app/dashboard/layout.js définit un layout spécifique pour les pages sous /dashboard.
File-based routing avancé :
- Comme avec pages, les fichiers et dossiers définissent les routes, mais il y a plus de flexibilité :
  - app/page.js → Route /
  - app/about/page.js → Route /about
  - app/blog/[slug]/page.js → Route dynamique /blog/:slug
React Server Components par défaut :
- Les composants dans app sont Server Components par défaut, ce qui améliore les performances en rendant la plupart des pages côté serveur.
Chargement asynchrone intégré :
- Les pages et composants peuvent inclure un état de chargement avec un fichier loading.js.
Rendu côté client :
- Bien que Server Components soient par défaut, vous pouvez rendre des composants côté client avec "use client".
API Routes :
- Les API routes ne sont pas supportées dans app. Pour cela, vous devez continuer à utiliser le répertoire pages/api.

Résumé des différences

Aspect	Répertoire `pages`	Répertoire `app`
Disponibilité	Méthode classique (Next.js < 13)	Méthode moderne (Next.js 13+)
Définition des routes	Basée sur les fichiers	Basée sur les fichiers avec layouts imbriqués
Server Components	Non pris en charge	Pris en charge par défaut
Layouts imbriqués	Pas de support natif	Support natif
API Routes	Supporté (`pages/api`)	Non supporté
getStaticProps/SSR	Supporté	Non nécessaire (remplacé par `fetch` côté serveur)
Utilisation recommandée	Pour les projets existants ou simples	Pour les projets modernes avec Next.js 13+

Quand utiliser quoi ?

Si vous démarrez un nouveau projet sur Next.js 13 ou plus, il est recommandé d’utiliser le répertoire app pour bénéficier des dernières fonctionnalités (Server Components, layouts imbriqués, etc.).
Si vous travaillez sur un projet existant ou si vous avez besoin d’API routes, le répertoire pages reste pertinent.