Справочник API / IntentLink

IntentLink

Используйте IntentLink там, где обычно используется Link из Next.js. Добавьте в onIntent работу, которую нужно начать до клика.

Props

PropТипПо умолчаниюОписание
hrefstring | UrlObject—Обязательный. Такой же, как у Link из Next.js.
importance"high" | "medium" | "low""medium"Насколько легко должна запускаться работа.
cost"high" | "medium" | "low""low"Насколько осторожным должен быть прогноз.
onIntent() => void—Вызывается один раз, когда пользователь, вероятно, выберет эту ссылку.
...rest——Любой prop ссылки Next.js или HTML-ссылки, включая className, style и ref.
IntentLink отключает автоматический prefetch Next.js. Для прогнозного prefetch вызовите router.prefetch() внутри onIntent.

onIntent

Callback не принимает аргументы и не возвращает значение. Он выполняется один раз за каждое приближение и снова готов к запуску, когда пользователь отдаляется.

onIntent?: () => void

importance и cost

Эти настройки необязательны. Большинству приложений стоит сохранить значения по умолчанию.

  • importance определяет, насколько легко запускается работа. По умолчанию: medium.
  • cost определяет осторожность прогноза. По умолчанию: low.
  • Меняйте значения только после проверки настоящей работы на компьютере и телефоне.

Пример

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