Structure du projet
Cette page fournit un aperçu de la structure des fichiers et des dossiers d'un projet Next.js. Il couvre les fichiers et dossiers de niveau supérieur, les fichiers de configuration et les conventions de routage dans les répertoires d'applications et de pages.
Dossiers de niveau supérieur
| Dossier | Description |
|---|---|
| app | Routeur d'application |
| pages | Routeur de pages |
| public | Actifs statiques à servir |
| src | Dossier source de l'application facultatif |
Fichiers de niveau supérieur
Next.js
| Fichier | Description |
|---|---|
| next.config.js | Fichier de configuration pour Next.js |
| package.json | Dépendances et scripts du projet |
| instrumentation.ts | Fichier OpenTelemetry et Instrumentation |
| middleware.ts | Middleware de requête Next.js |
| .env | Variables d'environnement |
| .env.local | Variables d'environnement locales |
| .env.production | Variables de l'environnement de production |
| .env.development | Variables d'environnement de développement |
| .eslintrc.json | Fichier de configuration pour ESLint |
| .gitignore | Fichiers et dossiers Git à ignorer |
| next-env.d.ts | Fichier de déclaration TypeScript pour Next.js |
| tsconfig.json | Fichier de configuration pour TypeScript |
| jsconfig.json | Fichier de configuration pour JavaScript |
Conventions de routage de l'application
Fichiers de routage
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| layout | .js .jsx .tsx | Mise en page |
| page | .js .jsx .tsx | Page |
| loading | .js .jsx .tsx | Chargement de l'interface utilisateur |
| not-found | .js .jsx .tsx | Interface utilisateur introuvable |
| error | .js .jsx .tsx | Erreur dans l'interface utilisateur |
| global-error | .js .jsx .tsx | Interface utilisateur d'erreur globale |
| route | .js .ts | Point de terminaison de l'API |
| template | .js .jsx .tsx | Mise en page restituée |
| default | .js .jsx .tsx | Page de secours pour les routages parallèles |
Routages imbriqués
| Élément | Description |
|---|---|
| folder | Segment de routage |
| folder/folder | Segment de routage imbriqué |
Routages dynamiques
| Élément | Description |
|---|---|
| [folder] | Segment d'itinéraire dynamique |
| [...folder] | Segment d'itinéraire fourre-tout |
| [[...folder]] | Segment de route fourre-tout en option |
Groupes de routage et dossiers privés
| Élément | Description |
|---|---|
| (folder) | Regrouper les itinéraires sans affecter le routage |
| _folder | Désactiver le dossier et tous les segments enfants du routage |
Routages parallèles et interceptés
| Élément | Description |
|---|---|
| @folder | Emplacement nommé |
| (.)folder | Intercepter au même niveau |
| (..)folder | Intercepter un niveau au-dessus |
| (..)(..)folder | Intercepter deux niveaux au-dessus |
| (...)folder | Intercepter depuis la racine |
Conventions des fichiers de métadonnées
Icônes d'application
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| favicon | .ico | Fichier d'icône favori |
| icon | .ico .jpg .jpeg .png .svg | Fichier d'icône d'application |
| icon | .js .ts .tsx | Icône d'application générée |
| apple-icon | .jpg .jpeg, .png | Fichier d'icône d'application Apple |
| apple-icon | .js .ts .tsx | Icône d'application Apple générée |
Images Open Graph et Twitter
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| opengraph-image | .jpg .jpeg .png .gif | Fichier d'image Open Graph |
| opengraph-image | .js .ts .tsx | Image Open Graph générée |
| twitter-image | .jpg .jpeg .png .gif | Fichier d'image Twitter |
| twitter-image | .js .ts .tsx | Image Twitter générée |
SEO
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| sitemap | .xml | Fichier de plan du site |
| sitemap | .js .ts | Plan du site généré |
| robots | .txt | Fichier robots |
| robots | .js .ts | Fichier Robots généré |
Conventions de routage de pages
Fichiers spéciaux
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| _app | .js .jsx .tsx | Application personnalisée |
| _document | .js .jsx .tsx | Document personnalisé |
| _error | .js .jsx .tsx | Page d'erreur personnalisée |
| 404 | .js .jsx .tsx | Page d'erreur 404 |
| 500 | .js .jsx .tsx | Page d'erreur 500 |
Routes
Convention de dossier
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| index | .js .jsx .tsx | Page d'accueil |
| folder/index | .js .jsx .tsx | Page imbriquée |
Convention de fichier
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| index | .js .jsx .tsx | Page d'accueil |
| file | .js .jsx .tsx | Page imbriquée |
Routage dynamiques
Convention de dossier
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| [folder]/index | .js .jsx .tsx | Segment de routage dynamique |
| [...folder]/index | .js .jsx .tsx | Segment de routage fourre-tout |
| [[...folder]]/index | .js .jsx .tsx | Segment de route fourre-tout en option |
Convention de fichier
| Catégorie | Extension de fichiers | Description |
|---|---|---|
| [file] | .js .jsx .tsx | Segment d'itinéraire dynamique |
| [...file] | .js .jsx .tsx | Segment d'itinéraire fourre-tout |
| [[...file]] | .js .jsx .tsx | Segment de route fourre-tout en option |
Dernière mise à jour : Mercredi, le 3 mars 2021