Avvio rapido

Aggiungi azioni basate sull’intento alla tua app Next.js in tre passaggi.

1 · Installa

$ npm install intent-link

2 · Avvolgi l’app una volta

Aggiungi IntentProvider una sola volta nel layout radice. Eseguirà un unico motore di intento condiviso per tutto ciò che contiene.

// 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 · Usa IntentLink

Usa IntentLink come un normale link Next.js e inserisci in onIntent il lavoro che vuoi iniziare in anticipo.

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

Per la maggior parte delle app non serve altro. La libreria non esegue il prefetch da sola: sei tu a decidere cosa fa onIntent.