Répertoire src

En alternative au placement des répertoires spéciaux Next.js app ou pages à la racine de votre projet, Next.js prend également en charge le modèle courant consistant à placer le code d'application dans le répertoire src.

Cela permet de séparer le code d'application des fichiers de configuration du projet qui se trouvent principalement à la racine, ce que préfèrent certains développeurs et équipes.

Pour utiliser le répertoire 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 répertoire `src`

Bon à savoir

  • Le répertoire /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.
  • Les fichiers .env.* doivent rester à la racine.
  • src/app ou src/pages seront ignorés si app ou pages sont présents dans le répertoire racine.
  • Si vous utilisez src, vous devriez probablement déplacer également d'autres dossiers d'application comme /components ou /lib.
  • Si vous utilisez Middleware, assurez-vous qu'il est placé dans le répertoire src.
  • Si vous utilisez Tailwind CSS, vous devrez ajouter le préfixe /src à 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/.