Agenti IA per siti Next.js con ASDK

I team che costruiscono il sito di marketing in Next.js, quando aggiungono uno script di terze parti, di solito badano a due cose: non deve rallentare il sito e non deve entrare in conflitto con il routing. ASDK è un solo script ospitato che si carica in modo asincrono, segue da solo la navigazione lato client e si configura dalla dashboard, quindi richiede un componente nel root layout e nessuna modifica per singola route.

Cosa aggiunge ASDK a un sito Next.js

ASDK costruisce un’unica base di conoscenza dalle tue pagine pubbliche, leggendole come fa un motore di ricerca, più i documenti che carichi. Ogni agente che attivi risponde da lì.

• Chat (accesso anticipato, dal piano Free) risponde ai visitatori in base a documentazione, prezzi e pagine prodotto, linka le pagine da cui viene ogni risposta e si offre di raccogliere i recapiti quando non può aiutare.
• Agent-Ready (accesso anticipato, dal piano Free) pubblica ciò che sa la tua base di conoscenza in formati che gli assistenti IA leggono bene, come un file llms.txt ospitato.
• Sales (accesso anticipato, dal piano Pro) fa le domande di qualifica che scrivi in parole semplici e propone una riunione ai visitatori in target.
• Search arriverà prossimamente. Risponderà al posto della casella di ricerca della documentazione, con le fonti.

Le pagine renderizzate sul server e generate staticamente sono le più facili da leggere per il crawler. Se parti del tuo sito vengono renderizzate solo nel browser, assicurati che i dati importanti siano anche nell’HTML inviato dal server.

Come gli agenti leggono un sito Next.js

La base di conoscenza nasce dalle tue pagine pubbliche, che il crawler di ASDK legge come un motore di ricerca. Si identifica e rispetta le regole del tuo robots.txt; la pagina del crawler spiega come. Tre fattori decidono quanto bene legge un sito Next.js:

• Cosa invia il server. Le pagine generate staticamente o renderizzate sul server contengono il testo nell’HTML, ed è il caso più semplice. Il testo che compare solo dopo un recupero di dati lato client potrebbe mancare da ciò che vede il crawler.
• Cosa consente robots.txt. Se il tuo robots.txt blocca i crawler che non conosce, ASDK non può leggere le tue pagine. Consentilo esplicitamente, oppure controlla le regole prima di aggiungere il sito.
• Cosa è pubblico. La documentazione dietro un login, i deploy di anteprima e le pagine escluse dalla ricerca restano fuori, a meno che tu non ne carichi i contenuti come documenti.

Poiché ogni agente risponde da questa base di conoscenza, le stesse pagine che aiutano i motori di ricerca migliorano anche le risposte degli agenti: una pagina dei prezzi chiara, pagine prodotto specifiche e una FAQ onesta.

Installazione nell’App Router

Aggiungi lo script al root layout, app/layout.tsx, con il componente next/script:

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.asdk.com/v1/asdk.js"
          data-site-id="SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

next/script passa al tag script gli attributi aggiuntivi come data-site-id, e uno script nel root layout si carica una sola volta, comunque navighi il visitatore. La guida di Next.js sul caricamento degli script spiega le strategie di caricamento (verificato a ottobre 2026). afterInteractive è quella giusta qui: il widget non serve prima che la pagina diventi interattiva.

Mantenere il sito veloce

Il widget è pensato per restare fuori dal tuo budget di performance:

• Non è nel tuo bundle. Lo script è ospitato su cdn.asdk.com, quindi non aggiunge nulla ai tuoi chunk JavaScript e si aggiorna senza un nuovo deploy del sito.
• Si carica dopo che la pagina è interattiva. Con afterInteractive, Next.js carica lo script quando la pagina può già rispondere all’input, così non compete con il tuo codice per il primo rendering.
• Si carica una volta sola. Nel root layout, lo script sopravvive alla navigazione lato client; passare da una pagina all’altra non lo scarica di nuovo.

Misura prima e dopo con gli strumenti che usi già, come Lighthouse o il monitoraggio degli utenti reali. Se un numero cambia, la guida alla risoluzione dei problemi e il nostro team possono aiutarti a capire perché.

Altre configurazioni

• Pages Router. Metti lo stesso elemento Script in pages/_app.tsx, accanto al componente della pagina, così ogni pagina lo riceve.
• React con Vite o una configurazione simile. Incolla il normale tag script in index.html, subito prima del tag body di chiusura. Non aggiungerlo dall’effect di un componente: in sviluppo React può eseguire gli effect due volte, e il widget deve caricarsi una volta sola.
• Altri framework. Qualsiasi framework con un layout condiviso o un template del documento funziona allo stesso modo: carica lo script una volta, su tutto il sito. La guida HTML copre il caso generale.

La guida all’installazione per Next.js e React contiene il codice completo per ciascun caso.

Chiamare il widget dalla tua app

Il widget aggiunge una funzione globale asdk. Per chiamarla prima che il widget sia caricato, definisci prima una piccola coda, in index.html o con uno Script inline che abbia un id:

<script>
  window.asdk = window.asdk || function () { (asdk.q = asdk.q || []).push(arguments); };
</script>

Poi, per esempio, passa la persona che ha effettuato l’accesso dopo il login, e dimenticala al logout:

window.asdk("identify", { email: user.email, name: user.name });
window.asdk("shutdown");

asdk("open") apre la chat dal tuo pulsante «Parla con noi».

Content Security Policy e nonce

Se il tuo sito invia una Content Security Policy, consenti https://cdn.asdk.com in script-src e https://api.asdk.com in connect-src. Se la policy usa i nonce con 'strict-dynamic', i nomi host vengono ignorati e lo script ha invece bisogno del nonce della pagina: passalo alla prop nonce del componente Script.

La guida di Next.js sulla Content Security Policy mostra come creare un nonce per ogni richiesta in proxy.ts e leggerlo in un Server Component (verificato a ottobre 2026). Segnala anche il compromesso: i nonce richiedono il rendering dinamico, quindi le pagine che li usano non possono essere generate staticamente. La nostra sezione sulla CSP elenca le origini esatte di cui ASDK ha bisogno.

Configura ASDK su un sito Next.js

Cosa è disponibile e cosa arriverà presto

ASDK nel suo insieme è in accesso anticipato: gli agenti funzionano e puoi usarli, ma possono cambiare mentre li miglioriamo.