البدء السريع

أضف استشعار نية المستخدم إلى تطبيق Next.js في ثلاث خطوات.

1 · التثبيت

$ npm install intent-link

2 · أحط التطبيق مرة واحدة

أضف IntentProvider مرة واحدة في التخطيط الجذري. سيشغّل محرك نية واحداً ومشتركاً لكل ما بداخله.

// app/layout.tsx
import { IntentProvider } from "intent-link"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <IntentProvider>{children}</IntentProvider>
      </body>
    </html>
  )
}

3 · استخدم IntentLink

استخدم IntentLink مثل رابط Next.js عادي، وضع العمل الذي تريد بدءه مبكراً داخل onIntent.

"use client"

import { IntentLink } from "intent-link"
import { useRouter } from "next/navigation"

function ProductCard({ href }: { href: string }) {
  const router = useRouter()
  return (
    <IntentLink href={href} onIntent={() => router.prefetch(href)}>
      View product
    </IntentLink>
  )
}

هذا كل ما تحتاجه معظم التطبيقات. لا تجلب المكتبة الصفحات مسبقاً من تلقاء نفسها؛ أنت تحدد ما يفعله onIntent.