Meilleures pratiques : structure des dossiers NextJS 13

Question

J'apprends à utiliser NextJS et j'utilise la dernière version d'App Router et je suis actuellement bloqué sur la façon d'effectuer le routage, comme où placer les pages d'inscription et de connexion et leur structure de dossiers en général, où placer les composants et comment mettre ensemble d'autres composants connexes, pourriez-vous faire la lumière sur ce sujet et le rendre aussi simple que possible, peut-être donner quelques exemples car j'apprends encore, toute aide serait grandement appréciée, merci !

Answer 1

Je pense que la lecture de cette section dans le prochain document vous aidera à organiser vos dossiers de projet :

https://nextjs.org/docs/app/building-your-app/routing/hosting

J'ai essayé de nombreuses structures différentes et j'ai finalement opté pour celle-ci :

1. Tout (tous les dossiers et fichiers) sera dans le répertoire /app car le répertoire /app accepte la colocation et il est différent du répertoire /pages qui n'est utilisé qu'à des fins de routage. De cette façon, le répertoire /app peut être considéré comme le nouveau répertoire /src.

2. Tous les dossiers non routés seront rendus privés en préfixant leur nom avec un trait de soulignement (comme mentionné dans le lien ci-dessus). Cela indique au routeur suivant que le dossier ne fait pas partie de la route. (par exemple _components, _libs,...)

3. À ce stade, nous avons déterminé que chaque dossier avec un trait de soulignement (_) n'est pas une route, et que les autres dossiers sans trait de soulignement font partie du système de routage (bien que le dossier contenant les fichiers page.tsx ou page.js fasse partie du système de routage (une autre condition pour faire partie d'un système de routage), mais j'ai utilisé une autre fonctionnalité de Next 13, qui concerne les groupes de routage (comme mentionné dans le lien ci-dessus). Il met le nom du dossier entre parenthèses afin que le dossier apparaisse à des fins d'organisation (regroupement de dossiers) et ne doit pas être inclus dans le chemin URL d'un itinéraire, par exemple (itinéraire).

Selon ces principes, j'ai mis tous les dossiers requis dans le répertoire /app et j'ai utilisé des groupes de routes pour regrouper toutes mes routes dans le dossier "(routes)", en utilisant des dossiers privés en les plaçant devant les dossiers non-routes. un préfixe de soulignement et tout est isolé.

L'image ci-dessous est un résumé de tous les points ci-dessus.

J'espère que ce lien et la façon dont j'ai organisé mes dossiers de projets vous seront utiles.