Dans Next.js, créer une route ne demande aucune configuration. Il suffit de créer un dossier dans app/ avec un fichier page à l'intérieur. La structure des dossiers correspond directement aux URLs.
| Chemin du fichier | URL générée |
|---|---|
| app/page | / |
| app/about/page | /about |
| app/blog/page | /blog |
| app/dashboard/settings/page | /dashboard/settings |
Pour gérer des URLs avec un identifiant variable, Next.js utilise les crochets dans les noms de dossiers.
💡 Le paramètre dynamique est récupéré dans la fonction params reçue en props par le composant page.
Pour transformer une route dynamique en pages statiques (SSG), Next.js fournit la fonction generateStaticParams. Elle est appelée au build et retourne la liste de toutes les valeurs à pré-générer.
Exemple concret : un blog avec 50 articles. La fonction retourne les 50 slugs, et Next.js génère 50 fichiers HTML statiques au build. Résultat : pages servies depuis le CDN, ultra rapides, parfaites pour le SEO.
Le cache Next.js est sophistiqué. Il faut comprendre les 4 niveaux pour bien le maîtriser.
| Niveau | Rôle | Durée |
|---|---|---|
| Request Memoization | Dédoublonne les fetch identiques pendant un même render | Durée de la requête |
| Data Cache | Cache les réponses fetch entre requêtes utilisateur | Persistant, configurable |
| Full Route Cache | Cache le HTML rendu d'une route | Au build (SSG) ou ISR |
| Router Cache | Cache côté navigateur des navigations récentes | Session utilisateur |
Crée un fichier loading à côté d'une page : Next.js l'affiche automatiquement pendant le chargement de la route. C'est de la magie : aucun useState, aucun spinner manuel à gérer.
Sous le capot, Next.js enveloppe la page dans un Suspense React et utilise loading comme fallback. Cela permet du streaming : les parties prêtes s'affichent immédiatement, les autres apparaissent au fur et à mesure.
De la même façon, un fichier error capture toutes les erreurs runtime de la route. L'utilisateur voit un message propre au lieu d'un écran blanc, et un bouton "Réessayer" relance le rendu.
Le streaming est l'une des innovations majeures de l'App Router. Au lieu d'attendre que toutes les données soient prêtes pour envoyer le HTML, Next.js envoie le HTML par morceaux dès qu'ils sont disponibles.
Concrètement : le header s'affiche en 100 ms, le contenu principal en 800 ms, les commentaires en 2 secondes. L'utilisateur voit la page se construire progressivement au lieu d'attendre 2 secondes face à un écran blanc.
Chaque route peut exporter une fonction generateMetadata qui retourne les balises meta (title, description, og:image). Next.js insère ces métadonnées dans le head du HTML rendu côté serveur.
| Critère | Server Component | Client Component |
|---|---|---|
| Exécution | Sur le serveur uniquement | Dans le navigateur |
| Accès DB | Direct, sans API | Impossible (passer par fetch) |
| useState / useEffect | Interdit | Autorisé |
| Événements (onClick) | Interdit | Autorisé |
| Bundle JS envoyé | Aucun | Inclus dans le bundle |
✅ Mantra : Serveur par défaut, Client uniquement si nécessaire. Le Client Component se déclare avec une directive en première ligne du fichier.
