Dossier src

En alternative à la présence des dossiers spéciaux Next.js app ou pages à la racine de votre projet, Next.js prend également en charge le schéma courant consistant à placer le code applicatif dans le dossier src.

Cette approche sépare le code applicatif des fichiers de configuration du projet qui se trouvent principalement à la racine, ce qui est préféré par certains développeurs et équipes.

Pour utiliser le dossier src, déplacez le dossier du routeur app ou pages vers src/app ou src/pages respectivement.

Un exemple de structure de dossier avec le dossier `src`

Bon à savoir :

  • Le dossier /public doit rester à la racine de votre projet.
  • Les fichiers de configuration comme package.json, next.config.js et tsconfig.json doivent rester à la racine du projet.
  • Les fichiers .env.* doivent rester à la racine du projet.
  • src/app ou src/pages seront ignorés si app ou pages sont présents dans le dossier racine.
  • Si vous utilisez src, vous devrez probablement déplacer également d'autres dossiers applicatifs comme /components ou /lib.
  • Si vous utilisez Middleware, assurez-vous qu'il est placé dans le dossier src.
  • Si vous utilisez Tailwind CSS, vous devrez ajouter le préfixe /src dans la section content du fichier tailwind.config.js.
  • Si vous utilisez les chemins TypeScript pour les imports comme @/*, vous devez mettre à jour l'objet paths dans tsconfig.json pour inclure src/.