أمثلة

استخدم 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>