L'équipe de Vercel a opté pour une approche simple du routage. Ils ont choisi d'utiliser les dossiers comme routes. Cela signifie que plus vous ajoutez de dossiers dans votre dossier app, plus vous obtenez de routes. De plus, si vous créez un nouveau dossier à l'intérieur d'un autre dossier (route), vous obtiendrez des routes imbriquées. Pour mieux comprendre ces concepts, nous vous suggérons de consulter l'image ci-dessous.

Nous avons clarifié la structure des dossiers, mais maintenant, examinons les fichiers présents dans ces dossiers. Next.js prend en charge deux types de fichiers distincts : page.tsx et layout.tsx. La différence réside dans leurs fonctions :

• layout.tsx est le fichier chargé d'encapsuler les éléments d'interface utilisateur spéciaux partagés entre plusieurs pages ;
• À l'inverse, page.tsx gère l'interface utilisateur spécifique à la route courante, en s'adaptant dynamiquement aux changements d'URL. Il représente l'affichage visuel associé au contenu unique et aux fonctionnalités propres à la route concernée.

Retour au projet

Création d'une route imbriquée appelée /dashboard pour notre application. Suivez les étapes ci-dessous pour y parvenir :

1. Créez un nouveau dossier dashboard à l'intérieur du dossier app ;
2. À l'intérieur du dossier dashboard nouvellement créé, créez un nouveau fichier nommé page.tsx ;
3. Copiez et collez le contenu suivant dans le fichier page.tsx.

Après avoir terminé toutes les étapes nécessaires, ouvrez l’URL suivante http://localhost:3000/dashboard. Vous devriez voir la page créée (texte Dashboard Page).

Dans le chapitre suivant, nous poursuivrons notre travail sur les pages. Mais ne vous inquiétez pas, nous continuons.