IntentLink

通常 Next.js の Link を使う場所で IntentLink を使います。クリックより前に始めたい処理を onIntent に追加します。

Props

Prop	型	既定値	説明
`href`	`string \| UrlObject`	—	必須。Next.js Link と同じです。
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	処理をどれだけ実行しやすくするか。
`cost`	`"high" \| "medium" \| "low"`	`"low"`	予測をどれだけ慎重にするか。
`onIntent`	`() => void`	—	ユーザーがこのリンクを選ぶ可能性が高いときに一度呼ばれます。
`...rest`	—	—	className、style、ref を含む Next.js Link またはアンカーの任意の prop。

IntentLink は Next.js の自動プリフェッチを無効にします。予測プリフェッチを使うには、onIntent 内で router.prefetch() を呼びます。

onIntent

このコールバックは引数を受け取らず、値も返しません。接近ごとに一度実行され、ユーザーが離れると再び実行可能になります。

onIntent?: () => void

importance と cost

これらの設定は省略できます。ほとんどのアプリでは既定値のままにしてください。

importance は処理の始まりやすさを制御します。既定値: medium。
cost は予測の慎重さを制御します。既定値: low。
実際の処理をデスクトップとモバイルの両方でテストしてから変更してください。

例

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