Structure d'un projet Next.js
Cette page fournit une vue d'ensemble de la structure d'un projet d'application Next.js. Elle couvre les fichiers et dossiers de premier niveau, les fichiers de configuration, et les conventions de routage dans les répertoires app et pages.
Cliquez sur les noms de fichiers et dossiers pour en savoir plus sur chaque convention.
Dossiers de premier niveau
Les dossiers de premier niveau sont utilisés pour organiser le code et les ressources statiques de votre application.
app | Routeur App |
pages | Routeur Pages |
public | Ressources statiques à servir |
src | Dossier source optionnel de l'application |
Fichiers de premier niveau
Les fichiers de premier niveau sont utilisés pour configurer votre application, gérer les dépendances, exécuter des middlewares, intégrer des outils de surveillance et définir des variables d'environnement.
| Next.js | |
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 d'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 app
Les conventions de fichiers suivantes sont utilisées pour définir les routes et gérer les métadonnées dans le routeur app.
Fichiers de routage
layout | .js .jsx .tsx | Layout |
page | .js .jsx .tsx | Page |
loading | .js .jsx .tsx | UI de chargement |
not-found | .js .jsx .tsx | UI introuvable |
error | .js .jsx .tsx | UI d'erreur |
global-error | .js .jsx .tsx | UI d'erreur globale |
route | .js .ts | Point de terminaison API |
template | .js .jsx .tsx | Layout re-rendu |
default | .js .jsx .tsx | Page de secours pour les routes parallèles |
Routes imbriquées
folder | Segment de route |
folder/folder | Segment de route imbriqué |
Routes dynamiques
[folder] | Segment de route dynamique |
[...folder] | Segment de route attrape-tout |
[[...folder]] | Segment de route attrape-tout optionnel |
Groupes de routes et dossiers privés
(folder) | Grouper des routes sans affecter le routage |
_folder | Exclure un dossier et ses segments enfants du routage |
Routes parallèles et interceptées
@folder | Emplacement nommé |
(.)folder | Interception même niveau |
(..)folder | Interception un niveau au-dessus |
(..)(..)folder | Interception deux niveaux au-dessus |
(...)folder | Interception depuis la racine |
Conventions de fichiers de métadonnées
Icônes d'application
favicon | .ico | Fichier favicon |
icon | .ico .jpg .jpeg .png .svg | Fichier icône d'application |
icon | .js .ts .tsx | Icône d'application générée |
apple-icon | .jpg .jpeg, .png | Fichier icône Apple |
apple-icon | .js .ts .tsx | Icône Apple générée |
Images Open Graph et Twitter
opengraph-image | .jpg .jpeg .png .gif | Fichier image Open Graph |
opengraph-image | .js .ts .tsx | Image Open Graph générée |
twitter-image | .jpg .jpeg .png .gif | Fichier image Twitter |
twitter-image | .js .ts .tsx | Image Twitter générée |
SEO
sitemap | .xml | Fichier sitemap |
sitemap | .js .ts | Sitemap généré |
robots | .txt | Fichier robots |
robots | .js .ts | Fichier robots généré |
Conventions de routage pages
Les conventions de fichiers suivantes sont utilisées pour définir les routes dans le routeur pages.
Fichiers spéciaux
_app | .js .jsx .tsx | App 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 | ||
index | .js .jsx .tsx | Page d'accueil |
folder/index | .js .jsx .tsx | Page imbriquée |
| Convention de fichier | ||
index | .js .jsx .tsx | Page d'accueil |
file | .js .jsx .tsx | Page imbriquée |
Routes dynamiques
| Convention de dossier | ||
[folder]/index | .js .jsx .tsx | Segment de route dynamique |
[...folder]/index | .js .jsx .tsx | Segment de route attrape-tout |
[[...folder]]/index | .js .jsx .tsx | Segment de route attrape-tout optionnel |
| Convention de fichier | ||
[file] | .js .jsx .tsx | Segment de route dynamique |
[...file] | .js .jsx .tsx | Segment de route attrape-tout |
[[...file]] | .js .jsx .tsx | Segment de route attrape-tout optionnel |