Structure de projet Next.js
Cette page fournit une vue d'ensemble de la structure des fichiers et dossiers d'un projet 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.
Dossiers de premier niveau
app | Routeur d'application (App Router) |
pages | Routeur de pages (Pages Router) |
public | Ressources statiques à servir |
src | Dossier source optionnel |
Fichiers de premier niveau
| Next.js | |
next.config.js | Fichier de configuration 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 production |
.env.development | Variables d'environnement développement |
.eslintrc.json | Fichier de configuration ESLint |
.gitignore | Fichiers et dossiers à ignorer pour Git |
next-env.d.ts | Fichier de déclaration TypeScript |
tsconfig.json | Fichier de configuration TypeScript |
jsconfig.json | Fichier de configuration JavaScript |
Conventions de routage app
Fichiers de routage
layout | .js .jsx .tsx | Mise en page (Layout) |
page | .js .jsx .tsx | Page |
loading | .js .jsx .tsx | UI de chargement |
not-found | .js .jsx .tsx | UI non trouvée |
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 | Mise en page re-rendue |
default | .js .jsx .tsx | Page de secours pour 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 attrape-tout (catch-all) |
[[...folder]] | Segment attrape-tout optionnel |
Groupes de routes et dossiers privés
(folder) | Grouper des routes sans affecter le routage |
_folder | Exclure un dossier et ses enfants du routage |
Routes parallèles et interceptées
@folder | Emplacement nommé (slot) |
(.)folder | Interception même niveau |
(..)folder | Interception niveau supérieur |
(..)(..)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 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
Fichiers spéciaux
_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 | ||
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 attrape-tout (catch-all) |
[[...folder]]/index | .js .jsx .tsx | Segment attrape-tout optionnel |
| Convention de fichier | ||
[file] | .js .jsx .tsx | Segment de route dynamique |
[...file] | .js .jsx .tsx | Segment attrape-tout (catch-all) |
[[...file]] | .js .jsx .tsx | Segment attrape-tout optionnel |