Örnekler

Güvenli ve tekrarlanabilir hazırlık işlerini başlatmak için onIntent kullanın. Satın alma, mesaj gönderme veya form gönderme gibi geri alınamaz işlemler gerçek tıklamayı beklemelidir.

Rotayı önceden yükle

En yaygın Next.js kullanım şekli.

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

Verileri hazırla

Sonraki ekranın ihtiyaç duyduğu bilgileri veri kitaplığınızın önbelleğine yerleştirin.

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

Görseli önceden yükle

Gezinmeden önce büyük bir kaynağı yüklemeye başlayın.

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

Bileşeni hazırla

Hedef bir bağlantı değilse useIntentTarget kullanın.

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

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