IntentLink

Usa IntentLink dove useresti normalmente il Link di Next.js. Aggiungi a onIntent il lavoro che vuoi iniziare prima del clic.

Props

Prop	Tipo	Predefinito	Descrizione
`href`	`string \| UrlObject`	—	Obbligatorio. Uguale al Link di Next.js.
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	Quanto facilmente deve iniziare il lavoro.
`cost`	`"high" \| "medium" \| "low"`	`"low"`	Quanto prudente deve essere la previsione.
`onIntent`	`() => void`	—	Chiamato una volta quando è probabile che l’utente scelga questo link.
`...rest`	—	—	Qualsiasi prop di Link di Next.js o di un’ancora, inclusi className, style e ref.

IntentLink disattiva il prefetch automatico di Next.js. Per il prefetch predittivo, chiama router.prefetch() dentro onIntent.

onIntent

Il callback non riceve argomenti e non restituisce alcun valore. Viene eseguito una volta per ogni avvicinamento e si riattiva quando l’utente si allontana.

onIntent?: () => void

importance e cost

Queste impostazioni sono facoltative. La maggior parte delle app dovrebbe mantenere i valori predefiniti.

importance controlla quanto facilmente inizia il lavoro. Valore predefinito: medium.
cost controlla la prudenza della previsione. Valore predefinito: low.
Modifica questi valori solo dopo aver provato il lavoro reale sia sul desktop sia sui dispositivi mobili.

Esempio

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