Structure et organisation du projet

Cette page fournit un aperçu de toutes les conventions de dossiers et fichiers dans Next.js, ainsi que des recommandations pour organiser votre projet.

Conventions de dossiers et fichiers

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 d'application
`pages`	Routeur de pages
`public`	Ressources statiques à servir
`src`	Dossier source optionnel de l'application

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 à ignorer pour Git
`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 fichiers


`_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
`dossier/index`	`.js` `.jsx` `.tsx`	Page imbriquée
Convention de fichier
`index`	`.js` `.jsx` `.tsx`	Page d'accueil
`fichier`	`.js` `.jsx` `.tsx`	Page imbriquée

Routes dynamiques


Convention de dossier
`[dossier]/index`	`.js` `.jsx` `.tsx`	Segment de route dynamique
`[...dossier]/index`	`.js` `.jsx` `.tsx`	Segment de route attrape-tout
`[[...dossier]]/index`	`.js` `.jsx` `.tsx`	Segment de route attrape-tout optionnel
Convention de fichier
`[fichier]`	`.js` `.jsx` `.tsx`	Segment de route dynamique
`[...fichier]`	`.js` `.jsx` `.tsx`	Segment de route attrape-tout
`[[...fichier]]`	`.js` `.jsx` `.tsx`	Segment de route attrape-tout optionnel