IntentLink

Verwende IntentLink überall dort, wo du normalerweise Next.js Link verwenden würdest. Füge onIntent für Arbeit hinzu, die vor dem Klick beginnen soll.

Props

Prop	Typ	Standard	Beschreibung
`href`	`string \| UrlObject`	—	Erforderlich. Wie bei Next.js Link.
`importance`	`"high" \| "medium" \| "low"`	`"medium"`	Wie bereitwillig die Aktion starten darf.
`cost`	`"high" \| "medium" \| "low"`	`"low"`	Wie vorsichtig die Vorhersage sein soll.
`onIntent`	`() => void`	—	Wird einmal aufgerufen, wenn der Benutzer diesen Link wahrscheinlich auswählt.
`...rest`	—	—	Jede Next.js-Link- oder Anchor-Prop, einschließlich className, style und ref.

IntentLink deaktiviert das automatische Vorladen von Next.js. Für prädiktives Vorladen rufst du router.prefetch() in onIntent auf.

onIntent

Der Callback erhält keine Argumente und gibt nichts zurück. Er läuft einmal pro Annäherung und wird wieder aktiviert, wenn sich der Benutzer entfernt.

onIntent?: () => void

Importance und Cost

Diese Einstellungen sind optional. Die meisten Anwendungen sollten die Standardwerte beibehalten.

importance steuert, wie bereitwillig die Aktion starten darf. Standard: medium.
cost steuert, wie vorsichtig die Vorhersage sein soll. Standard: low.
Ändere sie erst, nachdem du die echte Aktion auf Desktop und Mobilgerät getestet hast.

Beispiel

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