Toutes les conventions de fichiers et de dossiers de l'App Router dans un tableau consultable, un testeur qui transforme un chemin de fichier app/ en URL, et du code vérifié pour layout, loading et error.
Dans l'App Router, les dossiers placés dans app/ deviennent des segments d'URL et des fichiers spéciaux donnent à chaque segment son interface : page le rend public, layout l'enveloppe, loading ajoute un fallback Suspense, error ajoute un error boundary et route sert une API. Les crochets rendent un segment dynamique, les parenthèses regroupent des routes sans changer l'URL, et un tiret bas masque un dossier.
Les fichiers que vous écrirez le plus
Sur les forums, la plupart des questions sur l'App Router portent sur l'emplacement d'un fichier et sur la raison pour laquelle il n'est pas pris en compte. Cet aide-mémoire y répond directement : cherchez dans les conventions, saisissez un chemin de fichier pour voir l'URL qu'il produit et copiez des versions minimales des fichiers, le tout vérifié avec la documentation actuelle de nextjs.org.
Un layout reste monté quand vous passez d'une page enfant à l'autre, donc l'état et les effets persistent. Un fichier template se place juste à l'intérieur du layout et est rendu à nouveau à chaque navigation, ce qui convient aux effets qui doivent s'exécuter à chaque changement de page.
Soit la ligne 'use client' manque, car les error boundaries doivent être des Client Components, soit l'erreur se produit dans le layout du même segment, que error.tsx n'enveloppe pas. Les erreurs du layout racine nécessitent global-error.
error, un objet Error avec un digest facultatif, et retry, qui recharge les données et rend à nouveau le segment. Selon la documentation, retry est devenu stable dans la version 16.3. reset existe toujours pour effacer l'erreur sans recharger les données, mais retry est le choix habituel.
Un dossier commençant par un tiret bas est privé et ignoré par le routage. Pour obtenir un vrai segment d'URL commençant par un tiret bas, nommez le dossier avec %5F, la forme encodée, par exemple %5Fdrafts.
Dans la version 16, la convention de fichier middleware a été dépréciée et renommée proxy : les nouveaux projets utilisent donc proxy.ts à la racine du projet (ou dans src), qui exporte une fonction proxy. Next.js fournit un codemod, middleware-to-proxy, qui renomme le fichier et la fonction.
Fichiers, dossiers et fichiers de métadonnées
Obligatoire, et seul endroit où html et body sont écrits. Chaque page s'affiche à l'emplacement de children.
params est une Promise : la page est donc async et l'attend avec await avant d'utiliser slug.
Affiché dès la navigation pendant le streaming de la page. Il ne reçoit aucune prop.
Doit être un Client Component. retry recharge les données et rend à nouveau le segment.
Remplace le layout racine lorsqu'il est actif : il apporte donc ses propres html et body et ne peut pas exporter metadata.
Fichier
Interface partagée d'un segment et de ses enfants ; reste montée
Fichier
Interface d'une route ; rend le segment public
Fichier
Fallback Suspense du segment
Fichier
Interface affichée pour notFound() et les URL sans correspondance
Fichier
Error boundary ; Client Component
Fichier
Interface d'erreur du layout racine ; ses propres html et body
Fichier
Endpoint d'API ; .js ou .ts uniquement
Fichier
Comme un layout, mais rendu à nouveau à chaque navigation
Fichier
Fallback d'un slot de route parallèle
Fichier
Interface pour forbidden()
Fichier
Interface pour unauthorized()
Fichier racine
Proxy des requêtes à la racine du projet
Fichier racine
Configuration d'OpenTelemetry et de l'instrumentation
Dossier
Un segment d'URL
Dossier
Segment dynamique
Dossier
Segment catch-all, une ou plusieurs parties
Dossier
Catch-all facultatif, correspond aussi au parent
Dossier
Route group, exclu de l'URL
Dossier
Dossier privé, ignoré par le routage
Dossier
Slot nommé pour les routes parallèles
Dossier
Intercepte une route au même niveau
Dossier
Intercepte une route un niveau plus haut
Dossier
Intercepte une route deux niveaux plus haut
Dossier
Intercepte une route depuis la racine de app
Métadonnées
Icônes de l'application, en images ou générées par code
Métadonnées
Images de partage, en fichiers ou générées
Métadonnées
sitemap.xml et robots.txt, statiques ou générés
Saisissez un chemin de fichier dans app/. Le testeur retire les route groups, lit les segments dynamiques et vous donne le motif d'URL, ou la raison pour laquelle le fichier n'est pas une route.
Chemin du fichier
Chercher dans les conventions
Rechercher
error, slot, group
Filtrer par type
Tout
{n} affichés
Saisissez un chemin comme app/blog/[slug]/page.tsx
Pas une route : un dossier commençant par _ est privé.
Pas une route publique. {file} est un fichier spécial qui enveloppe la route de ce dossier.
Pas une route publique. {file} est un fichier colocalisé et n'est jamais servi.
les fichiers route doivent être en .js ou .ts.
{d} est un route group, exclu de l'URL
{d} est un slot de route parallèle, pas un segment d'URL
{d} correspond aussi au chemin parent
{d} est une route d'interception
Endpoint d'API à {url}
Page à {url}
Commencer gratuitement · Sans carte bancaire