Liaison et navigation

Il existe deux façons de naviguer entre les routes dans Next.js :

En utilisant le composant <Link>
En utilisant le hook useRouter

Cette page expliquera comment utiliser <Link>, useRouter(), et approfondira le fonctionnement de la navigation.

Composant `<Link>`

<Link> est un composant intégré qui étend la balise HTML <a> pour fournir un préchargement et une navigation côté client entre les routes. C'est la méthode principale pour naviguer entre les routes dans Next.js.

Vous pouvez l'utiliser en l'important depuis next/link, et en passant une prop href au composant :

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

import Link from 'next/link'

export default function Page() {
  return <Link href="/dashboard">Dashboard</Link>
}

Il existe d'autres props optionnelles que vous pouvez passer à <Link>. Consultez la référence API pour en savoir plus.

Exemples

Liaison vers des segments dynamiques

Lors de la liaison vers des segments dynamiques, vous pouvez utiliser des littéraux de gabarit et interpolation pour générer une liste de liens. Par exemple, pour générer une liste d'articles de blog :

app/blog/PostList.js

import Link from 'next/link'

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

Vérification des liens actifs

Vous pouvez utiliser usePathname() pour déterminer si un lien est actif. Par exemple, pour ajouter une classe au lien actif, vous pouvez vérifier si le pathname actuel correspond au href du lien :

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Accueil
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            À propos
          </Link>
        </li>
      </ul>
    </nav>
  )
}

'use client'

import { usePathname } from 'next/navigation'
import Link from 'next/link'

export function Links() {
  const pathname = usePathname()

  return (
    <nav>
      <ul>
        <li>
          <Link className={`link ${pathname === '/' ? 'active' : ''}`} href="/">
            Accueil
          </Link>
        </li>
        <li>
          <Link
            className={`link ${pathname === '/about' ? 'active' : ''}`}
            href="/about"
          >
            À propos
          </Link>
        </li>
      </ul>
    </nav>
  )
}

Défilement vers un `id`

Le comportement par défaut du routeur d'application Next.js est de défiler vers le haut d'une nouvelle route ou de maintenir la position de défilement pour la navigation arrière et avant.

Si vous souhaitez défiler vers un id spécifique lors de la navigation, vous pouvez ajouter un lien de hachage # à votre URL ou simplement passer un lien de hachage à la prop href. Ceci est possible car <Link> se rend comme une balise <a>.

<Link href="/dashboard#settings">Paramètres</Link>

// Sortie
<a href="/dashboard#settings">Paramètres</a>

Désactivation de la restauration du défilement

Le comportement par défaut du routeur d'application Next.js est de défiler vers le haut d'une nouvelle route ou de maintenir la position de défilement pour la navigation arrière et avant. Si vous souhaitez désactiver ce comportement, vous pouvez passer scroll={false} au composant <Link>, ou scroll: false à router.push() ou router.replace().

// next/link
<Link href="/dashboard" scroll={false}>
  Tableau de bord
</Link>

// useRouter
import { useRouter } from 'next/navigation'

const router = useRouter()

router.push('/dashboard', { scroll: false })

Hook `useRouter()`

Le hook useRouter vous permet de changer de route programmatiquement.

Ce hook ne peut être utilisé que dans les composants clients et est importé depuis next/navigation.

app/page.js

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.push('/dashboard')}>
      Tableau de bord
    </button>
  )
}

Pour une liste complète des méthodes de useRouter, consultez la référence API.

Recommandation : Utilisez le composant <Link> pour naviguer entre les routes, sauf si vous avez une exigence spécifique pour utiliser useRouter.

Le routeur d'application utilise une approche hybride pour le routage et la navigation. Sur le serveur, votre code d'application est automatiquement divisé par segments de route. Et sur le client, Next.js précharge et met en cache les segments de route. Cela signifie que lorsqu'un utilisateur navigue vers une nouvelle route, le navigateur ne recharge pas la page, et seuls les segments de route qui changent sont re-rendus - améliorant ainsi l'expérience de navigation et les performances.

1. Préchargement

Le préchargement est un moyen de précharger une route en arrière-plan avant que l'utilisateur ne la visite.

Il existe deux façons dont les routes sont préchargées dans Next.js :

Composant <Link> : Les routes sont automatiquement préchargées lorsqu'elles deviennent visibles dans le viewport de l'utilisateur. Le préchargement se produit lorsque la page se charge pour la première fois ou lorsqu'elle apparaît dans le viewport via le défilement.
router.prefetch() : Le hook useRouter peut être utilisé pour précharger des routes programmatiquement.

Le comportement de préchargement de <Link> est différent pour les routes statiques et dynamiques :

Routes statiques : prefetch est par défaut true. La route entière est préchargée et mise en cache.
Routes dynamiques : prefetch est par défaut automatique. Seul le layout partagé jusqu'au premier fichier loading.js est préchargé et mis en cache pendant 30s. Cela réduit le coût de préchargement d'une route dynamique entière, et signifie que vous pouvez afficher un état de chargement instantané pour un meilleur retour visuel aux utilisateurs.

Vous pouvez désactiver le préchargement en définissant la prop prefetch à false.

Consultez la référence API de <Link> pour plus d'informations.

Bon à savoir :

Le préchargement n'est pas activé en développement, seulement en production.

2. Mise en cache

Next.js a un cache côté client en mémoire appelé Cache du routeur. Lorsque les utilisateurs naviguent dans l'application, la charge utile du composant serveur React des segments de route préchargés et des routes visitées est stockée dans le cache.

Cela signifie que lors de la navigation, le cache est réutilisé autant que possible, au lieu de faire une nouvelle requête au serveur - améliorant ainsi les performances en réduisant le nombre de requêtes et les données transférées.

Apprenez-en plus sur le fonctionnement du Cache du routeur et comment le configurer.

3. Rendu partiel

Le rendu partiel signifie que seuls les segments de route qui changent lors de la navigation sont re-rendus côté client, et que les segments partagés sont préservés.

Par exemple, lors de la navigation entre deux routes frères, /dashboard/settings et /dashboard/analytics, les pages settings et analytics seront rendues, et le layout partagé dashboard sera préservé.

Sans rendu partiel, chaque navigation entraînerait un re-rendu complet de la page côté serveur. Le rendu uniquement du segment qui change réduit la quantité de données transférées et le temps d'exécution, ce qui améliore les performances.

Par défaut, le navigateur effectue une navigation dure entre les pages. Cela signifie que le navigateur recharge la page et réinitialise l'état React comme les hooks useState dans votre application et l'état du navigateur comme la position de défilement ou l'élément focalisé. Cependant, dans Next.js, le routeur d'application utilise une navigation douce. Cela signifie que React ne rend que les segments qui ont changé tout en préservant l'état React et du navigateur, et qu'il n'y a pas de rechargement complet de la page.

Par défaut, Next.js maintiendra la position de défilement pour la navigation arrière et avant, et réutilisera les segments de route dans le Cache du routeur.