IntentLink

Use IntentLink wherever you would normally use Next.js Link. Add onIntent for work that should begin before the click.

Props

Prop	Type	Default	Description
`href`	`string \| UrlObject`	—	Required. Same as Next.js Link.
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	How readily the action may start.
`cost`	`"high" \| "medium" \| "low"`	`"low"`	How cautious the prediction should be.
`onIntent`	`() => void`	—	Called once when the user is likely to choose this link.
`...rest`	—	—	Any Next.js Link or anchor prop, including className, style, and ref.

IntentLink disables Next.js automatic prefetching. If you want predictive prefetching, call router.prefetch() inside onIntent.

onIntent

The callback takes no arguments and returns nothing. It runs once per approach, then rearms after the user moves away.

onIntent?: () => void

Importance and cost

These settings are optional. Most applications should keep the defaults.

importance controls how readily the action may start. Default: medium.
cost controls how cautious the prediction should be. Default: low.
Only change them after testing the real action on both desktop and mobile.

Example

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