Référence de l'API / IntentLink

IntentLink

Utilisez IntentLink partout où vous utiliseriez normalement le Link de Next.js. Ajoutez onIntent pour le travail qui doit commencer avant le clic.

Props

PropTypeValeur par défautDescription
hrefstring | UrlObject—Obligatoire. Identique au Link de Next.js.
importance"high" | "medium" | "low""medium"Facilité avec laquelle l’action peut démarrer.
cost"high" | "medium" | "low""low"Niveau de prudence de la prédiction.
onIntent() => void—Appelé une fois quand l’utilisateur choisira probablement ce lien.
...rest——Toute prop de Link Next.js ou d’ancre HTML, dont className, style et ref.
IntentLink désactive le préchargement automatique de Next.js. Pour un préchargement prédictif, appelez router.prefetch() dans onIntent.

onIntent

Le callback ne reçoit aucun argument et ne renvoie rien. Il s’exécute une fois par approche, puis se réarme quand l’utilisateur s’éloigne.

onIntent?: () => void

Importance et coût

Ces réglages sont facultatifs. La plupart des applications devraient conserver les valeurs par défaut.

  • importance contrôle la facilité avec laquelle l’action démarre. Valeur par défaut : medium.
  • cost contrôle la prudence de la prédiction. Valeur par défaut : low.
  • Ne les modifiez qu’après avoir testé l’action réelle sur ordinateur et mobile.

Exemple

"use client"

import { IntentLink } from "intent-link"
import { useRouter } from "next/navigation"

export function ProductCard() {
  const router = useRouter()
  const href = "/checkout"

  return (
    <IntentLink
      href={href}
      importance="medium"
      cost="low"
      onIntent={() => router.prefetch(href)}
    >
      Checkout
    </IntentLink>
  )
}