Liaison et navigation

Le routeur de Next.js permet d'effectuer des transitions de route côté client entre les pages, similaire à une application monopage.

Un composant React appelé Link est fourni pour effectuer cette transition de route côté client.

import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">Accueil</Link>
      </li>
      <li>
        <Link href="/about">À propos</Link>
      </li>
      <li>
        <Link href="/blog/hello-world">Article de blog</Link>
      </li>
    </ul>
  )
}

export default Home

L'exemple ci-dessus utilise plusieurs liens. Chacun mappe un chemin (href) à une page connue :

• / → pages/index.js
• /about → pages/about.js
• /blog/hello-world → pages/blog/[slug].js

Tout <Link /> dans la zone visible (initialement ou via défilement) sera préchargé par défaut (y compris les données correspondantes) pour les pages utilisant la Génération statique. Les données correspondantes pour les routes rendues côté serveur sont récupérées uniquement lorsque le <Link /> est cliqué.

Liaison vers des chemins dynamiques

Vous pouvez également utiliser l'interpolation pour créer le chemin, ce qui est pratique pour les segments de route dynamiques. Par exemple, pour afficher une liste d'articles passés au composant en tant que prop :

import Link from 'next/link'

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

export default Posts

encodeURIComponent est utilisé dans l'exemple pour garder le chemin compatible utf-8.

Alternativement, en utilisant un objet URL :

import Link from 'next/link'

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: '/blog/[slug]',
              query: { slug: post.slug },
            }}
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

Maintenant, au lieu d'utiliser l'interpolation pour créer le chemin, nous utilisons un objet URL dans href où :

• pathname est le nom de la page dans le répertoire pages. /blog/[slug] dans ce cas.
• query est un objet avec le segment dynamique. slug dans ce cas.

Injection du routeur

Pour accéder à l'objet router dans un composant React, vous pouvez utiliser useRouter ou withRouter.

En général, nous recommandons d'utiliser useRouter.

Routage impératif

next/link devrait couvrir la plupart de vos besoins en matière de routage, mais vous pouvez également effectuer des navigations côté client sans lui, consultez la documentation pour next/router.

L'exemple suivant montre comment effectuer des navigations de page de base avec useRouter:

import { useRouter } from 'next/router'

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

  return (
    <button onClick={() => router.push('/about')}>
      Cliquez ici pour en savoir plus
    </button>
  )
}

Routage superficiel (Shallow Routing)

Le routage superficiel permet de changer l'URL sans exécuter à nouveau les méthodes de récupération de données, y compris getServerSideProps, getStaticProps, et getInitialProps.

Vous recevrez le pathname mis à jour et la query via l'objet router (ajouté par useRouter ou withRouter), sans perdre l'état.

Pour activer le routage superficiel, définissez l'option shallow sur true. Considérez l'exemple suivant :

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// L'URL actuelle est '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Toujours effectuer les navigations après le premier rendu
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // Le compteur a changé !
  }, [router.query.counter])
}

export default Page

L'URL sera mise à jour vers /?counter=10 et la page ne sera pas remplacée, seul l'état de la route est modifié.

Vous pouvez également surveiller les changements d'URL via componentDidUpdate comme montré ci-dessous :

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // vérifier que les props ont changé pour éviter une boucle infinie
  if (query.counter !== prevProps.router.query.counter) {
    // récupérer les données en fonction de la nouvelle query
  }
}

Mises en garde

Le routage superficiel ne fonctionne que pour les changements d'URL dans la page actuelle. Par exemple, supposons que nous ayons une autre page appelée pages/about.js, et que vous exécutiez ceci :

router.push('/?counter=10', '/about?counter=10', { shallow: true })

Comme il s'agit d'une nouvelle page, elle déchargera la page actuelle, chargera la nouvelle et attendra la récupération des données même si nous avons demandé un routage superficiel.

Lorsque le routage superficiel est utilisé avec un middleware, il ne garantit pas que la nouvelle page correspond à la page actuelle comme cela était fait auparavant sans middleware. Cela est dû au fait que le middleware peut réécrire dynamiquement et ne peut pas être vérifié côté client sans une récupération de données qui est ignorée avec le routage superficiel, donc un changement de route superficiel doit toujours être traité comme superficiel.