Next JS - Navigation & Routage | la NavBar

Bonjour à tous

Nous avons vu précédemment comment configurer Next JS. Dans cette vidéo, nous allons voir plus en détail comment fonctionne le routage dans NextJS et l'utiliser pour continuer à créer notre application Next JS.

Tout d'abord, qu'est-ce que le routage ? Pourquoi est-ce important ?

Le routage détermine quel composant doit être rendu en fonction de l'URL appelée. En d'autres termes, c'est la façon dont Next.js fait correspondre les URL à des pages ou des composants spécifiques dans votre application.

Dans Next.js, le routage se fait via le répertoire /pages de votre projet. Ce répertoire contient toutes les pages qui composent votre application, et chaque page correspond à une URL spécifique.

Il faut préciser que Next JS 13 a introduit une fonctionnalité expérimentale où les pages sont gérées dans le répertoire /app. Lorsque vous activez la fonctionnalité, Next vous avertit qu'elle "peut provoquer des comportement inattendus et des bugs. Utilisez-la à vos risques et périls". Je vais donc en parler dans une vidéo spécifique. Mais pour l'instant, nous allons nous en tenir au répertoire /pages.

Maintenant, comment Next JS fait-il correspondre les URLs aux composants ?

Disons que vous avez une application Next.js avec un fichier index et un fichier about et un dossier appelé blog/ avec un index.tsx et un first-post.tsx dedans.

pages/
  index.tsx
  about.tsx
  blog/
    index.tsx 
    first-post.tsx

NextJS utilise un routage basé sur les fichiers. Qu'est-ce que cela signifie ?

Quand un utilisateur navigue vers votre application, Next.js regarde l'URL et détermine quelle page doit être rendue en se basant sur le nom du fichier dans le répertoire pages.

Disons que votre site web est hébergé sur kodaps.dev, et qu'un utilisateur navigue vers https://kodaps.dev. Dans ce cas, Next JS va mapper l'URL racine, la page d'accueil, au fichier index.tsx. Si l'utilisateur navigue vers kodaps.dev/about, Next fera correspondre l'URL /about au fichier about.tsx.

Une fois que Next a identifié le fichier composant, il prend ce qui est exporté par défaut dans le fichier identifié, et il fait le rendu de ce composant.

Il convient également de mentionner ici que Next JS prend en charge les routes imbriquées. Dans notre exemple, Next va faire correspondre la route /blog au fichier blog/index.tsx et l'url /blog/first-post au fichier /blog/first-post.tsx.

C'est bien beau, mais si vous codiez un blog, vous ne voulez pas créer une page pour chaque article. Heureusement, Next.js fournit également un moyen de définir des routes dynamiques, ce qui vous permet de faire correspondre des URL avec des composants spécifiques. Typiquement, pour un article de blog, nous utiliserons ce que l'on appelle son "slug" qui ressemble souvent au titre en minuscules avec tous les espaces remplacés par des tirets.

Dans ce cas, nous définissons une route dynamique à l'aide de crochets. Dans notre exemple, au lieu des fichiers first-post.tsx, nous aurions un fichier [slug].tsx.

pages/
  blog/
    index.tsx
    [slug].tsx

Dans ce cas, les crochets entourant le paramètre slug indiquent qu'il s'agit d'un paramètre dynamique qui peut prendre différentes valeurs. Ainsi, si un utilisateur navigue vers /blog/first-post, Next.js rendra le composant [slug].tsx et passera la chaîne first-post comme paramètre.

Ce n’est qu’un aperçu de ce que permet le routage dans Next.js, mais ça suffit pour ce qu’on veut faire.

Le Header

Appliquons cela à notre application Next JS. Nous mettrons en place des routes dynamiques lorsque nous ferons le contenu complet du blog. Pour l'instant, nous allons naviguer entre la page du blog et l'application.

Et nous allons créer une "NavBar", une barre de navigation. Nous allons mettre en place la mise en page, puis la navigation. Pour cela, nous allons poursuivre le composant "Header" que nous avons commencé.

Pour ceux d'entre vous qui n’ont pas suivi ce que nous avons fait jusqu’à présent, voici le lien qui vous permettra de suivre en téléchargeant le code à l'endroit où nous en sommes :

Le premier composant dont nous avons besoin, c’est la “NavBar”, que présente le site de Daisy UI. Pour l’implémenter, on définit un élément en lui donnant une class de “navbar”. A l’intérieur de cette barre de navigation on peut définir un élément de début, un élément de fin et un élément central. Dans notre cas on va se limiter aux deux premiers. On va mettre le logo au début, à gauche, et les éléments de navigation à la fin, à droite.

Pour commencer on va déjà lancer le projet. Pour ça on ouvre une fenêtre de terminal (si c’est pas déjà fait) dans Visual Studio Code. Ensuite on tape :

npm run dev

Si vous préférez yarn vous pouvez taper :

yarn dev

Pour ma part je suis en train de regarder PNPM pour le moment, donc je tape :

pnpm run dev

Si on ouvre le localhost:3000 on voit ce qu'on avait commencé précédemment. Notamment notre composant header - qui pour le moment est très sommaire.

Pour mémoire on avait crée ce composant Header dans le fichier Header.tsx dans le dossier composant.

Si on l’ouvre ce fichier, on voit que ce n’était d’une div avec un texte qui dit “Header”. A la place de cette div, on va plutôt utiliser un élément header, ce qui rendra notre HTML plus sémantique. Et en se basant sur la documentation de DaisyUI, il nous faut spécifier un className=”navbar” sur notre l’élément header.

A l’intérieur de tout ça, on crée une div, dans lequel on met simplement le texte “logo”. On lui rajoute un className=“navbar-start”. A présent on rajoute un deuxième élément, une également une div. Et on lui précise que sa “className” est de “navbar-end”, donc ferré à droite.

export const Header:React.FC = () => {
  return <header className="navbar">
    <div className="navbar-start">Logo</div>
    <div className="navbar-end"></div>
  </header>;
}

Maintenant on va placer dans ce “navbar-end” les éléments de menu. Donc on va créer 3 divs. Dans la première on va écrire “Blog”, dans le deuxième “Concept” et dans le troisième “Connexion”.

export const Header:React.FC = () => {
  return <header className="navbar">
    <div className="navbar-start">Logo</div>
    <div className="navbar-end">
      <div>Blog</div>
      <div>Concept</div>
      <div>Connexion</div>
	</div>
  </header>;
}

Si on regarde le résultat, on voit bien les différents éléments mais ils sont tous entassés. Ils mériteraient d’être un peu plus aérés. Donc on va rajouter un peu de padding horizontal. Pour ca on va simplement rajouter une classe “px-3” a chacune des div des éléments de navigation du menu, ainsi qu’au logo.

export const Header:React.FC = () => {
  return <header className="navbar">
    <div className="navbar-start px-3">Logo</div>
    <div className="navbar-end">
      <div className="px-3">Blog</div>
      <div className="px-3">Concept</div>
      <div className="px-3">Connexion</div>
	</div>
  </header>;
}

Le résultat est bien plus aéré.

A présent, voyons comment gérer la navigation entre différentes pages. Si vous vous souvenez, on avait déjà commencé à créer un accueil et une page blog très sommaires. Et maintenant on va voir comment naviguer entre les différentes pages.

Dans le composant Header, si on était en HTML on aurait tendance à simplement mettre un element <a>avec un “href” qui indique un lien vers la page. Dans Next JS ce n’est guère plus compliqué. On va simplement mettre un composant <Link>, et ce composant va avoir un attribut “href” qui indique le chemin vers la page. Donc ici on a :

<Link href="/blog">Blog</Link>

Si on teste, et qu’on clique sur le lien on se retrouve bien sur notre page Blog. Ce qui nous crée un nouveau problème, puisqu’on n’a pas moyen de revenir en arrière.

Ce qu'on va faire ? Et bien on va simplement rajouter un lien sur le logo qui va nous ramener vers l’accueil. Donc de la meme façon, on fait simplement:

<Link href=“/“>LOGO</Link>

Du coup maintenant, on peut naviguer entre les deux pages en cliquant sur les liens qui sont sur le header, on bascule entre le blog et l’accueil. Dans l’absolu on pourrait mettre des éléments <a>, mais le composant Link nous permet de mieux interagir avec le routeur de Next JS.

Quoi qu’il en soit, pour le moment nous avons notre page et un début de navigation.

Jusqu’à présent nous avons vu comment installer Next JS et comment naviguer entre les pages.

Par la suite, nous allons explorer comment marchent les classes CSS de Tailwind, et notamment comment s’en servir pour mettre en place des pages “responsives”, c’est à dire qui s’adaptent à différents formats d’écran.

Nous allons aussi regarder plus en détail Daisy UI, les composants que cette librairie propose et pourquoi l’utilisation de classes sémantiques est intéressant. Et nous allons en profiter pour mettre en place la suite de notre page de garde.