مرجع الواجهة البرمجية / IntentLink

IntentLink

استخدم IntentLink حيث تستخدم عادةً Link من Next.js. أضف إلى onIntent العمل الذي تريد بدءه قبل النقر.

الخصائص

الخاصيةالنوعالافتراضيالوصف
hrefstring | UrlObject—مطلوبة. مماثلة لـ Link في Next.js.
importance"high" | "medium" | "low""medium"مدى سهولة بدء العمل.
cost"high" | "medium" | "low""low"مدى حذر التنبؤ.
onIntent() => void—تُستدعى مرة واحدة عندما يُرجح أن يختار المستخدم هذا الرابط.
...rest——أي خاصية لرابط Next.js أو لعنصر الرابط، بما فيها className وstyle وref.
يعطّل IntentLink الجلب المسبق التلقائي في Next.js. للجلب المسبق التنبؤي، استدعِ router.prefetch() داخل onIntent.

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