Composant Link

Pour créer des liens entre les pages d'un site web, on utilise généralement la balise HTML <a>.

Avec Next.js, vous pouvez utiliser le composant Link next/link pour créer des liens entre les pages de votre application. <Link> permet une navigation côté client (client-side) et accepte des props qui offrent un meilleur contrôle sur le comportement de navigation.

Utilisation de <Link>

Commencez par ouvrir pages/index.js et importez le composant Link depuis next/link en ajoutant cette ligne en haut du fichier :

import Link from 'next/link';

Ensuite, trouvez la balise h1 qui ressemble à ceci :

<h1 className={styles.title}>
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

Et remplacez-la par :

<h1 className={styles.title}>
  Lisez <Link href="/posts/first-post">cette page !</Link>
</h1>

Puis, ouvrez pages/posts/first-post.js et remplacez son contenu par :

import Link from 'next/link';
 
export default function FirstPost() {
  return (
    <>
      <h1>Premier article</h1>
      <h2>
        <Link href="/">Retour à l'accueil</Link>
      </h2>
    </>
  );
}

Comme vous pouvez le voir, le composant Link s'utilise de manière similaire aux balises <a>, mais au lieu d'utiliser <a href="…">, on utilise <Link href="…">.

Remarque : Avant Next.js 12.2, il était obligatoire que le composant Link englobe une balise <a>, mais ce n'est plus nécessaire dans les versions 12.2 et supérieures.

Vérifions que cela fonctionne. Vous devriez maintenant avoir un lien sur chaque page, permettant de naviguer entre elles :