API 参考 / IntentLink

IntentLink

在通常使用 Next.js Link 的地方使用 IntentLink。把希望在点击前开始的工作加入 onIntent。

属性

属性类型默认值说明
hrefstring | UrlObject—必填，与 Next.js Link 相同。
importance"high" | "medium" | "low""medium"工作应该多容易被触发。
cost"high" | "medium" | "low""low"预测应该多谨慎。
onIntent() => void—当用户很可能选择此链接时调用一次。
...rest——任何 Next.js Link 或锚点属性，包括 className、style 和 ref。
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>
  )
}