Beispiele

onIntent kann jede sichere, wiederholbare Vorbereitung starten. Nicht umkehrbare Aktionen wie Käufe, Nachrichten und Formularübermittlungen müssen hinter einem echten Klick bleiben.

Route vorladen

Der häufigste Next.js-Anwendungsfall.

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

Daten vorbereiten

Lass deine Datenbibliothek die Informationen zwischenspeichern, die der nächste Bildschirm benötigt.

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

Bild vorladen

Beginne vor der Navigation mit dem Laden einer großen Ressource.

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

Komponente vorbereiten

Verwende useIntentTarget, wenn das Ziel kein Link ist.

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

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