API 레퍼런스 / IntentLink

IntentLink

일반적으로 Next.js Link를 사용하는 곳에 IntentLink를 사용하세요. 클릭 전에 시작할 작업을 onIntent에 추가합니다.

Props

Prop타입기본값설명
hrefstring | UrlObject—필수. Next.js Link와 같습니다.
importance"high" | "medium" | "low""medium"작업이 얼마나 쉽게 실행될지 정합니다.
cost"high" | "medium" | "low""low"예측이 얼마나 신중할지 정합니다.
onIntent() => void—사용자가 이 링크를 선택할 가능성이 높을 때 한 번 호출됩니다.
...rest——className, style, ref를 포함한 모든 Next.js Link 또는 앵커 prop.
IntentLink는 Next.js 자동 프리페치를 끕니다. 예측 프리페치를 사용하려면 onIntent 안에서 router.prefetch()를 호출하세요.

onIntent

이 콜백은 인수를 받지 않고 값을 반환하지 않습니다. 접근할 때마다 한 번 실행되고 사용자가 멀어지면 다시 실행할 수 있습니다.

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