快速上手

只需三步，即可为 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 做什么完全由你决定。