IntentLink

Usa IntentLink donde normalmente usarías Link de Next.js. Añade onIntent para el trabajo que deba comenzar antes del clic.

Props

Prop	Tipo	Predeterminado	Descripción
`href`	`string \| UrlObject`	—	Obligatorio. Igual que en Link de Next.js.
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	Con qué facilidad puede comenzar la acción.
`cost`	`"high" \| "medium" \| "low"`	`"low"`	Qué tan cautelosa debe ser la predicción.
`onIntent`	`() => void`	—	Se llama una vez cuando es probable que el usuario elija este enlace.
`...rest`	—	—	Cualquier prop de Link de Next.js o de un enlace HTML, incluidos className, style y ref.

IntentLink desactiva la precarga automática de Next.js. Para usar precarga predictiva, llama a router.prefetch() dentro de onIntent.

onIntent

El callback no recibe argumentos ni devuelve nada. Se ejecuta una vez por aproximación y se rearma cuando el usuario se aleja.

onIntent?: () => void

Importancia y coste

Estos ajustes son opcionales. La mayoría de las aplicaciones deberían conservar los valores predeterminados.

importance controla con qué facilidad puede comenzar la acción. Predeterminado: medium.
cost controla qué tan cautelosa debe ser la predicción. Predeterminado: low.
Cámbialos solo después de probar la acción real tanto en escritorio como en móvil.

Ejemplo

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