使用例

onIntent では、安全で繰り返し可能な準備処理を開始できます。購入、メッセージ送信、フォーム送信など取り消せない処理は、実際のクリック後に行ってください。

ルートをプリフェッチ

一般的な Next.js の使用例です。

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

データを準備

次の画面で必要になる情報をデータライブラリのキャッシュに入れます。

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

画像をプリロード

移動する前に大きなアセットの読み込みを始めます。

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

コンポーネントを準備

ターゲットがリンクでない場合は useIntentTarget を使います。

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

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