Repérer l’organisation du dossier app

Quand une application grandit, il devient difficile de savoir quel fichier correspond à quelle URL. L’App Router de Next.js s’appuie sur une organisation prévisible : les dossiers placés dans app représentent les segments de route, et certains noms de fichiers définissent leur fonction. Vous allez repérer cette organisation dans le projet du catalogue de randonnées.

Repérer le dossier app

Dans le projet sentiers-randonnees, le dossier app est la racine des routes gérées par l’App Router. Chaque dossier de route décrit un segment de chemin ; les fichiers conventionnels placés dans ces dossiers indiquent à Next.js quel contenu ou quelle structure utiliser. Cette organisation rend le lien entre le système de fichiers et les URL visible directement dans l’éditeur.

sentiers-randonnees/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── itineraires/
│       └── [slug]/
│           └── page.tsx
├── public/
│   └── images/
│       ├── foret.jpg
│       └── montagne.jpg
└── style.css

Cette arborescence suit le contrat du projet : un dossier est réservé à chaque segment de route, et le fichier de page se trouve dans le dossier correspondant. Les extensions sont en .tsx, puisque le projet utilise TypeScript avec JSX. Vous rencontrerez parfois des exemples en .js ou .jsx dans la documentation ; dans ce projet, conservez les noms page.tsx et layout.tsx.

Comprendre les fichiers conventionnels

Un fichier page.tsx définit le contenu associé à une route. Le nom du fichier est une convention reconnue par Next.js : vous ne le choisissez pas librement si vous voulez déclarer une page avec l’App Router. Dans l’arborescence, app/page.tsx est placé directement sous app, tandis que la page d’itinéraire se trouve dans son propre dossier.

Le fichier app/layout.tsx est le layout racine du projet. Il porte la structure partagée de l’application ; son contenu détaillé sera construit dans la leçon consacrée au layout. Retenez dès maintenant son emplacement et son nom conventionnel : il se trouve à la racine de app, au même niveau que la page d’accueil.

Lire l’arborescence du catalogue

Le dossier itineraires correspond au segment /itineraires. Il contient un sous-dossier [slug], dont le nom entre crochets signale un segment variable. Le fichier page.tsx placé à l’intérieur est celui de cette route de détail. La création et l’utilisation de ce segment seront abordées dans une leçon ultérieure ; pour l’instant, identifiez seulement sa place dans l’arborescence.

Les dossiers public et images ne définissent pas de routes : ils accueillent les fichiers image du projet. Le fichier style.css, placé à la racine selon le contrat, sera importé depuis le layout. Les emplacements et l’utilisation des images seront étudiés plus tard ; ne déplacez pas ces fichiers dans app.

Vous avez déjà créé le projet avec create-next-app et savez lancer le serveur avec npm run dev ; ces étapes ne sont pas reprises ici. Ouvrez le dossier du projet dans votre éditeur et comparez les fichiers existants à l’arborescence de référence. Au fil des prochaines leçons, vous remplacerez le contenu de départ par les fichiers du catalogue, sans modifier les chemins imposés.

À retenir

• Le dossier app rassemble les routes de l’App Router.
• Un dossier de route organise les fichiers correspondant à un segment du chemin.
• page.tsx définit le contenu d’une route ; layout.tsx porte la structure partagée.
• Dans ce projet TypeScript, respectez les extensions .tsx et les chemins du contrat.
• public/images contient les visuels, tandis que style.css reste à la racine.

Dans la prochaine leçon, vous étudierez le rendu serveur par défaut avant de construire les pages du catalogue.