Exemplos

Use onIntent para iniciar trabalhos de preparação seguros e repetíveis. Ações irreversíveis, como comprar, enviar uma mensagem ou submeter um formulário, devem esperar pelo clique real.

Prefetch de rota

O caso de uso mais comum no Next.js.

<IntentLink href={href} onIntent={() => router.prefetch(href)}>
  {label}
</IntentLink>

Preparar dados

Coloque no cache da sua biblioteca de dados as informações necessárias para a próxima tela.

<IntentLink
  href={`/product/${id}`}
  onIntent={() => queryClient.prefetchQuery({ queryKey: ["product", id] })}
>
  {name}
</IntentLink>

Pré-carregar imagem

Comece a carregar um recurso grande antes da navegação.

<IntentLink
  href={`/product/${id}`}
  onIntent={() => {
    const image = new Image()
    image.src = heroImageFor(id)
  }}
>
  {name}
</IntentLink>

Preparar componente

Use useIntentTarget quando o alvo não for um link.

const intentRef = useIntentTarget<HTMLButtonElement>({
  onIntent: () => { void import("./product-preview") },
})

return <button ref={intentRef}>Open preview</button>