Navigation entre les pages

Dans le chapitre précédent, vous avez créé la mise en page et les pages du tableau de bord. Maintenant, ajoutons quelques liens pour permettre aux utilisateurs de naviguer entre les routes du tableau de bord.

Pourquoi optimiser la navigation ?

Pour créer des liens entre les pages, vous utiliseriez traditionnellement l'élément HTML <a>. Actuellement, les liens de la barre latérale utilisent des éléments <a>, mais observez ce qui se passe lorsque vous naviguez entre les pages d'accueil, de factures et de clients dans votre navigateur.

L'avez-vous remarqué ?

Il y a un rechargement complet de la page à chaque navigation !

Le composant <Link>

Dans Next.js, vous pouvez utiliser le composant <Link /> pour créer des liens entre les pages de votre application. <Link> permet une navigation côté client avec JavaScript.

Pour utiliser le composant <Link />, ouvrez /app/ui/dashboard/nav-links.tsx et importez le composant Link depuis next/link. Ensuite, remplacez la balise <a> par <Link> :

import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
 
// ...
 
export default function NavLinks() {
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

Comme vous pouvez le voir, le composant Link est similaire à l'utilisation des balises <a>, mais au lieu de <a href="…">, vous utilisez <Link href="…">.

Enregistrez vos modifications et vérifiez si cela fonctionne sur votre localhost. Vous devriez maintenant pouvoir naviguer entre les pages sans voir de rechargement complet. Bien que certaines parties de votre application soient rendues côté serveur, il n'y a pas de rechargement complet de la page, ce qui donne une sensation d'application web native. Pourquoi cela ?

Découpage automatique du code et préchargement

Pour améliorer l'expérience de navigation, Next.js découpe automatiquement votre application par segments de route. Ceci est différent d'une SPA React traditionnelle, où le navigateur charge tout le code de votre application lors du chargement initial de la page.

Le découpage du code par routes signifie que les pages sont isolées. Si une certaine page génère une erreur, le reste de l'application continuera à fonctionner. Cela représente également moins de code à analyser pour le navigateur, ce qui rend votre application plus rapide.

De plus, en production, chaque fois que des composants <Link> apparaissent dans la fenêtre d'affichage du navigateur, Next.js précharge automatiquement le code pour la route liée en arrière-plan. Au moment où l'utilisateur clique sur le lien, le code de la page de destination est déjà chargé en arrière-plan, et c'est ce qui rend la transition de page quasi instantanée !

Apprenez-en plus sur le fonctionnement de la navigation.

Modèle : Affichage des liens actifs

Un modèle d'interface utilisateur courant consiste à afficher un lien actif pour indiquer à l'utilisateur sur quelle page il se trouve. Pour ce faire, vous devez obtenir le chemin actuel de l'utilisateur à partir de l'URL. Next.js fournit un hook appelé usePathname() que vous pouvez utiliser pour vérifier le chemin et implémenter ce modèle.

Comme usePathname() est un hook React, vous devrez transformer nav-links.tsx en un composant client. Ajoutez la directive "use client" de React en haut du fichier, puis importez usePathname() depuis next/navigation :

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
 
// ...

Ensuite, assignez le chemin à une variable appelée pathname dans votre composant <NavLinks /> :

export default function NavLinks() {
  const pathname = usePathname();
  // ...
}

Remarque : nav-links.tsx n'est pas un fichier spécial pour Next.js — il peut être nommé comme vous le souhaitez. Si vous le renommez, assurez-vous de mettre à jour les instructions d'importation en conséquence.

Vous pouvez utiliser la bibliothèque clsx présentée dans le chapitre sur le style CSS pour appliquer conditionnellement des noms de classe lorsque le lien est actif. Lorsque link.href correspond à pathname, le lien doit être affiché avec un texte bleu et un fond bleu clair.

Voici le code final pour nav-links.tsx :

'use client';
 
import {
  UserGroupIcon,
  HomeIcon,
  DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import clsx from 'clsx';
 
// ...
 
export default function NavLinks() {
  const pathname = usePathname();
 
  return (
    <>
      {links.map((link) => {
        const LinkIcon = link.icon;
        return (
          <Link
            key={link.name}
            href={link.href}
            className={clsx(
              'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
              {
                'bg-sky-100 text-blue-600': pathname === link.href,
              },
            )}
          >
            <LinkIcon className="w-6" />
            <p className="hidden md:block">{link.name}</p>
          </Link>
        );
      })}
    </>
  );
}

Enregistrez et vérifiez votre localhost. Vous devriez maintenant voir le lien actif mis en évidence en bleu.