Structure d'un projet avec Next.js

Dans le blogue de cette semaine, je vais vous expliquer en détail les différents fichiers et répertoires d'un projet Next.js et comment organiser la structure d'un projet. 

Structure d'un nouveau projet 

Je vais vous expliquer le rôle de chacun des fichiers et dossiers que l’on peut retrouver dans la structure d'un projet Next.js nouvellement créé :

• .next/: Ce dossier est généré automatiquement par Next.js lors de la construction de l'application. Il contient les fichiers de sortie générés par Next.js lors des commandes build, start, ou export. Cela inclut les fichiers HTML, CSS et JS optimisés, ainsi que divers fichiers de cache et de chunk.
•  node_modules/: Ce dossier contient tous les paquets que vous avez installés en utilisant la commande npm create-next-app@latest. Dans le cas de l'installation du projet montré plus haut, ce dossier contiendra les modules de React et Next.js, mais aussi les paquets que j'ai ajoutés pour la création de ce projet, dont TypeScript, ESLint et Tailwind CSS. Ces modules sont les dépendances nécessaires au fonctionnement de cette application.
• public/: Ce dossier contient les fichiers statiques accessibles publiquement, tels que les images, les styles, les scripts, les fichiers de police, etc. Tous les fichiers placés ici peuvent être chargés dans l'application via une URL relative.
• src/ : "Ce dossier est le dossier racine recommandé pour tous les fichiers sources de l'application, ce qui permet une meilleure organisation. Les développeurs y placent le code source de l'application, y compris les pages, les composants, les utilitaires, etc.
• src/app:  
  • favicon.ico: Ce ficher du type .ico est l'icone affichée dans l'onglet du navigateur.
  • globals.css : ce fichier est utiliser pour implémenté le style css appliqués globalement à toute l'application.
  • layout.tsx : Ce fichier est un composant React qui définit la structure de la mise en page commune dans plusieurs pages comme l'en-tête, le pied de page et la navigation.

  • page.tsx : Ce fichier représente un composant de page créé par défaut lors de la création du projet. Cette page par défaut inclut une présentation de la documentation de Next.js avec des redirections vers le site web officiel de Next.js.

     

Modification recommandé

• pages/: Lors de l'implémentation d'un site web à plusieurs pages, il est recommendé de créer un dossier pages/ où on y place les différentes pages de l'application. C'est à l'intérieur de ce dossier que vous devez céer le dossier api/ pour définir les différents endpoints d'API pour votre application web. 
• styles/: Il est aussi recommandé de regrouper tous les fichiers CSS qui contiennent le style de chacune des pages.
• _middleware: ce fichier .js est très utile pour les implémentations backend de votre application. Voici un article qui explique plus profondément la fonctionnalité de ce fichier : Middleware

Exemple de structure de projet

Ici, le fichier index.js est la page d'accueil du projet. Si vous ajoutez un nouveau fichier dans le dossier pages, il sera traité comme une route.
Dans cet exemple, le fichier hello.js est un point de terminaison d'API. Si vous cliquez sur la route API http://localhost:3000/api/hello, vous obtiendrez une réponse du serveur.
 

Source

• Victor Minjire, « Next Js 13 folder structure: Overview », Medium, https://medium.com/@markminj/next-js-13-folder-structure-overview-40857a1de45d (Page consultée le 17 février 2024)
• Gabriel Eloy, « Next JS Backend », Back4app, https://blog.back4app.com/fr/next-js-backend/ (Page consultée le 17 février 2024)
   
• Zach Shallbetter, « Middleware in Next.js: A Comprehensive Guide », Medium, https://medium.com/@zachshallbetter/middleware-in-next-js-a-comprehensive-guide-7dd0a928541a (Page consultée le 17 février 2024)

• AKDEV, « Apprendre à créer une API facilement avec Next JS ! », Youtube, https://www.youtube.com/watch?v=NQL4peAZ-rk (Page consultée le 17 février 2024)