Examples

onIntent can start any safe, repeatable preparation work. Keep irreversible actions—such as purchases, messages, and form submissions—behind a real click.

Prefetch a route

The common Next.js use case.

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

Warm data

Ask your data library to cache information the next screen will need.

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

Preload an image

Begin loading a large asset before navigation.

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

Prepare a component

Use useIntentTarget when the target is not a link.

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

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