IntentLink

Use IntentLink onde normalmente usaria o Link do Next.js. Adicione a onIntent o trabalho que deve começar antes do clique.

Props

Prop	Tipo	Padrão	Descrição
`href`	`string \| UrlObject`	—	Obrigatório. Igual ao Link do Next.js.
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	Quão fácil deve ser iniciar o trabalho.
`cost`	`"high" \| "medium" \| "low"`	`"low"`	Quão cautelosa deve ser a previsão.
`onIntent`	`() => void`	—	Chamado uma vez quando o usuário provavelmente escolherá este link.
`...rest`	—	—	Qualquer prop de Link do Next.js ou de âncora, incluindo className, style e ref.

IntentLink desativa o prefetch automático do Next.js. Para prefetch preditivo, chame router.prefetch() dentro de onIntent.

onIntent

O callback não recebe argumentos nem retorna um valor. Ele é executado uma vez por aproximação e pode ser rearmado quando o usuário se afasta.

onIntent?: () => void

importance e cost

Essas configurações são opcionais. A maioria dos apps deve manter os valores padrão.

importance controla a facilidade para iniciar o trabalho. Padrão: medium.
cost controla o cuidado da previsão. Padrão: low.
Só altere esses valores depois de testar o trabalho real no desktop e no celular.

Exemplo

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