Return
Published on

Directory Structure

Next.js simplifie grandement la gestions des routes, grâce à un système de routage basé sur les structures de fichiers. Un concept intuitif et puissant, qui permet de structurer les fichiers de manière efficace et facile à maintenir.

Next.js simplifie grandement la gestions des routes, grâce à un système de routage basé sur les structures de fichiers. Un concept intuitif et puissant, qui permet de structurer les fichiers de manière efficace et facile à maintenir.

Le Routage automatique

L'une des principales caractéristiques de Next.js est son système de routage automatique. Au lieu de spécifier explicitement chaque route, Next.js utilise automatiquement les fichiers dans l'app directory /app pour générer les routes.

bash
app
├── blog
│   ├── page.tsx
│   └── post
│       ├── [id]
│       │   └── page.tsx
│       └── page.tsx
├── about
│   ├── page.tsx
│   └── team
│       └── page.tsx
├── contact
│   ├── page.tsx
│   └── form
│       └── page.tsx
├── index.tsx
├── page.tsx
  • Dans l'exemple ci-dessus, le fichier /app/page.tsx correspond à la page /.
  • Le fichier /app/posts/page.tsx correspond à la page /posts.

Cette convention rend le code plus lisible et la gestion des routes plus naturelle. Chaque segment d'URL est directement lié à un dossier, et les fichiers page.tsx définissent les points d'entrée de chaque route.

Fichiers spéciaux et colocalisation

Outre les fichiers page.tsx, d'autres fichiers peuvent être présents dans le répertoire. Voici quelques exemples :

bash
app
├── components
│   ├── Header.tsx
│   └── Footer.tsx
├── lib
│   ├── utils.ts
│   └── hooks.ts
├── blog
│   ├── page.tsx
│   └── nav.tsx
  • Les dossiers components et lib sont des dossiers composants et utilitaires qui peuvent être utilisés par plusieurs pages. A l'intérieur de ces dossiers, des fichiers comme Header.tsx ou utils.ts sont présents, on considère qu'ils sont "colocalisés" avec le dossier parent.

A proprement dit, ils ne sont pas routables.

  • Le dossier blog lui est considéré comme une page, car il contient un fichier page.tsx, qui pour être totalement considéré comme telle, doit être exporté par défaut.
tsx
export default function BlogPage() {
  return <div>Blog page</div>;
}

Concernant les routes dynamiques comme /posts/[id], on en reperlera dans cette article.