빠른 시작

세 단계만으로 Next.js 앱에 의도 감지 동작을 추가할 수 있습니다.

1 · 설치

$ npm install intent-link

2 · 앱을 한 번 감싸기

루트 레이아웃에 IntentProvider를 한 번 추가하세요. 그 안의 모든 항목에 하나의 공유 의도 엔진이 작동합니다.

// app/layout.tsx
import { IntentProvider } from "intent-link"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <IntentProvider>{children}</IntentProvider>
      </body>
    </html>
  )
}

3 · IntentLink 사용

일반 Next.js 링크처럼 IntentLink를 사용하고, 미리 시작할 작업을 onIntent에 넣으세요.

"use client"

import { IntentLink } from "intent-link"
import { useRouter } from "next/navigation"

function ProductCard({ href }: { href: string }) {
  const router = useRouter()
  return (
    <IntentLink href={href} onIntent={() => router.prefetch(href)}>
      View product
    </IntentLink>
  )
}

대부분의 앱에는 이것으로 충분합니다. 라이브러리가 자동으로 프리페치하지 않으며, onIntent가 수행할 작업은 사용자가 정합니다.