<Link>

<Link> est un composant React qui étend l'élément HTML <a> pour fournir le préchargement (prefetching) et la navigation côté client entre les routes. C'est le moyen principal de naviguer entre les routes dans Next.js.

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>
}

Props

Voici un résumé des props disponibles pour le composant Link :

Bon à savoir : Les attributs de balise <a> tels que className ou target="_blank" peuvent être ajoutés à <Link> comme props et seront transmis à l'élément <a> sous-jacent.

href (requis)

Le chemin ou l'URL vers lequel naviguer.

<Link href="/dashboard">Dashboard</Link>

href peut également accepter un objet, par exemple :

// Naviguer vers /about?name=test
<Link
  href={{
    pathname: '/about',
    query: { name: 'test' },
  }}
>
  À propos
</Link>

replace

Par défaut à false. Lorsque true, next/link remplacera l'état actuel de l'historique au lieu d'ajouter une nouvelle URL dans la pile d'historique du navigateur.

import Link from 'next/link'

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

import Link from 'next/link'

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

scroll

Par défaut à true. Le comportement par défaut de <Link> est de faire défiler vers le haut d'une nouvelle route ou de maintenir la position de défilement pour la navigation avant et arrière. Lorsque false, next/link ne fera pas défiler vers le haut de la page après une navigation.

import Link from 'next/link'

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

import Link from 'next/link'

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

prefetch

Par défaut à true. Lorsque true, next/link préchargera la page (désignée par href) en arrière-plan. Ceci est utile pour améliorer les performances des navigations côté client. Tout <Link /> dans la zone visible (initialement ou via le défilement) sera préchargé.

Le préchargement peut être désactivé en passant prefetch={false}. Le préchargement n'est activé qu'en production.

import Link from 'next/link'

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

import Link from 'next/link'

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

Exemples

Lien vers des routes dynamiques

Pour les routes dynamiques, il peut être pratique d'utiliser des littéraux de modèle pour créer le chemin du lien.

Par exemple, vous pouvez générer une liste de liens vers la route dynamique app/blog/[slug]/page.js :

import Link from 'next/link'

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

Middleware

Il est courant d'utiliser Middleware pour l'authentification ou d'autres fins impliquant la réécriture de l'utilisateur vers une page différente. Pour que le composant <Link /> précharge correctement les liens avec des réécritures via Middleware, vous devez indiquer à Next.js à la fois l'URL à afficher et l'URL à précharger. Ceci est nécessaire pour éviter des requêtes inutiles vers le middleware pour connaître la route correcte à précharger.

Par exemple, si vous souhaitez servir une route /dashboard qui a des vues authentifiées et visiteurs, vous pouvez ajouter quelque chose de similaire à ce qui suit dans votre Middleware pour rediriger l'utilisateur vers la page correcte :

export function middleware(req) {
  const nextUrl = req.nextUrl
  if (nextUrl.pathname === '/dashboard') {
    if (req.cookies.authToken) {
      return NextResponse.rewrite(new URL('/auth/dashboard', req.url))
    } else {
      return NextResponse.rewrite(new URL('/public/dashboard', req.url))
    }
  }
}

Dans ce cas, vous devriez utiliser le code suivant dans votre composant <Link /> :

import Link from 'next/link'
import useIsAuthed from './hooks/useIsAuthed'

export default function Page() {
  const isAuthed = useIsAuthed()
  const path = isAuthed ? '/auth/dashboard' : '/dashboard'
  return (
    <Link as="/dashboard" href={path}>
      Dashboard
    </Link>
  )
}

Historique des versions