Comment Fonctionne le Routage

L'équipe de Vercel a choisi une approche simple pour le routage. Ils ont décidé d'utiliser des dossiers comme routes. Cela signifie que plus vous ajoutez de dossiers à votre dossier app, plus vous obtiendrez 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 regarder l'image ci-dessous.

Nous avons trié la structure des dossiers, mais maintenant, plongeons dans les fichiers résidant dans ces dossiers. Next.js accueille deux types de fichiers distincts : page.tsx et layout.tsx. La distinction réside dans leurs rôles :

• layout.tsx sert de fichier responsable de l'encapsulation des éléments d'interface utilisateur spéciaux partagés entre plusieurs pages ;
• À l'inverse, page.tsx prend en charge l'interface utilisateur spécifique à la route actuelle, s'adaptant dynamiquement aux changements d'URL. Il incarne la représentation visuelle associée au contenu unique et aux fonctionnalités pertinentes pour la route particulière en question.

Retour au projet

Créons 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 nouveau dossier dashboard, créez un nouveau fichier appelé 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 continuerons notre travail sur les pages. Mais ne vous inquiétez pas, nous continuons.