Le Next.js App Router est le système de routage devenu stable avec Next.js 13, qui remplace l'ancien dossier pages/. En faisant correspondre directement la structure de vos dossiers aux URL, il apporte par défaut les React Server Components, les layouts imbriqués et le streaming. Dans ce guide, nous allons construire pas à pas, avec des exemples réels, le fonctionnement du dossier app/, le rôle des fichiers spéciaux et la logique des routes imbriquées.
Pourquoi le dossier app existe-t-il ?
Dans l'ancien système pages/, chaque fichier était une page et la récupération de données reposait sur des fonctions spéciales comme getServerSideProps. L'App Router est basé sur les dossiers : un dossier est un segment de route et les fichiers spéciaux qu'il contient définissent le comportement de ce segment. La plus grande différence est que les composants sont des Server Components par défaut : ils sont rendus sur le serveur sans envoyer de JavaScript au navigateur.
La façon la plus saine de démarrer un projet avec l'App Router est l'outil officiel d'initialisation :
npx create-next-app@latest mon-projet
cd mon-projet
npm run devL'assistant d'installation pose des questions sur TypeScript, ESLint et l'App Router. Lorsque vous choisissez l'App Router, un dossier app/ est créé à la racine du projet.
Fichiers spéciaux : page, layout et les autres
Dans l'App Router, les dossiers créent la route, mais un segment ne devient réellement accessible que grâce à des fichiers portant des noms précis. Les plus courants sont :
page.tsx— rend le contenu réel du segment et rend la route publiquement accessible.layout.tsx— une coquille partagée entre les segments enfants, non re-rendue lors de la navigation.loading.tsx— crée une limite Suspense ; l'état affiché pendant le chargement des données.error.tsx— un composant côté client qui capture les erreurs du segment.not-found.tsx— l'interface 404 pour les contenus introuvables.
Dans sa forme la plus simple, une page d'accueil ressemble à ceci :
// app/page.tsx
export default function Home() {
return <h1>Bonjour aslain.dev</h1>;
}Le layout racine : un squelette obligatoire
app/layout.tsx est obligatoire dans tout projet App Router car c'est lui qui définit les balises <html> et <body>. Le layout racine est la coquille la plus externe qui enveloppe chaque page, et il est conservé lors des transitions de page :
// app/layout.tsx
export const metadata = {
title: "aslain.dev",
description: "Le portfolio d'un développeur polyvalent",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="fr">
<body>{children}</body>
</html>
);
}La prop children représente la page enfant ou le layout interne qui sera inséré dans ce layout. C'est la pierre angulaire de la structure imbriquée.
La logique des routes imbriquées
Les routes imbriquées se créent en plaçant des dossiers à l'intérieur de dossiers. Imaginons que nous construisions une section blog :
app/
layout.tsx → layout racine
page.tsx → /
blog/
layout.tsx → enveloppe /blog et en dessous
page.tsx → /blog
[slug]/
page.tsx → /blog/n-importe-quel-articleIci, [slug] est un segment dynamique. Les crochets indiquent que cette partie provient de l'URL. Vous accédez à la valeur via params :
// app/blog/[slug]/page.tsx
export default async function Post({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
return <article>Article : {slug}</article>;
}Depuis Next.js 15, params est désormais une Promise et doit être attendu avec await, c'est pourquoi nous avons déclaré le composant en async. Point essentiel : blog/layout.tsx enveloppe à la fois /blog et /blog/[slug], mais il n'est pas re-rendu lorsque l'utilisateur passe d'un article à l'autre. C'est idéal pour préserver des éléments communs comme une barre latérale ou un en-tête.
Composants serveur et client
Dans l'App Router, chaque composant est un Server Component sauf indication contraire. Là où vous avez besoin d'interactivité (clics, état, useState, useEffect), vous ajoutez la directive "use client" tout en haut du fichier :
// app/components/Compteur.tsx
"use client";
import { useState } from "react";
export default function Compteur() {
const [n, setN] = useState(0);
return <button onClick={() => setN(n + 1)}>{n}</button>;
}Une bonne stratégie consiste à garder la majeure partie de l'arbre en Server Components et à ne basculer côté client que les éléments interactifs au niveau des feuilles. Vous maintenez ainsi au minimum la quantité de JavaScript envoyée au navigateur.
Naviguer entre les pages
Pour passer d'une page à l'autre, utilisez le composant next/link plutôt qu'un simple <a>. Il assure une navigation côté client et le préchargement (prefetch) :
import Link from "next/link";
export default function Menu() {
return (
<nav>
<Link href="/">Accueil</Link>
<Link href="/blog">Blog</Link>
</nav>
);
}Lorsque vous avez besoin d'une navigation programmatique, récupérez le hook useRouter depuis next/navigation dans les composants client.
Questions fréquentes
L'App Router et le Pages Router peuvent-ils coexister dans un même projet ?
Oui. Next.js autorise les dossiers app/ et pages/ à la racine ; cela est conçu pour migrer progressivement les projets existants. Si la même route est définie dans les deux, app/ a la priorité.
Que se passe-t-il si j'ajoute un dossier sans page.tsx ?
Un dossier sans page.tsx n'est pas accessible par URL ; il sert uniquement à l'organisation (par exemple les groupes de routes ou les composants partagés). Une route accessible nécessite toujours un page.tsx.
Où dois-je récupérer les données ?
Vous pouvez utiliser async/await avec fetch directement dans les Server Components ; aucune fonction spéciale comme getServerSideProps n'est nécessaire. Next.js met automatiquement en cache les appels fetch et les revalide au besoin.
Vous voulez configurer correctement votre projet Next.js ou migrer une application existante vers l'App Router ? Je peux vous aider à bâtir une architecture propre, performante et optimisée pour le SEO. Contactez-moi et planifions votre projet ensemble.