AI-agents toevoegen aan een Next.js-site met ASDK

Teams die hun marketingsite in Next.js bouwen, letten bij een script van derden meestal op twee dingen: het mag de site niet vertragen, en het mag niet botsen met hun routing. ASDK is één gehost script dat asynchroon laadt, navigatie aan de clientkant zelf volgt en vanuit het dashboard wordt ingesteld. Het kost dus één component in je root-layout en geen wijzigingen per route.

Wat ASDK toevoegt aan een Next.js-site

ASDK bouwt één kennisbank uit je openbare pagina’s, zoals een zoekmachine ze leest, plus documenten die je uploadt. Elke agent die je aanzet, antwoordt daaruit.

• Chat (vroege toegang, vanaf het Free-abonnement) beantwoordt bezoekers vanuit je documentatie, prijzen en productpagina’s, linkt naar de pagina’s waar elk antwoord vandaan komt en biedt aan contactgegevens te noteren als hij niet kan helpen.
• Agent-Ready (vroege toegang, vanaf het Free-abonnement) publiceert wat je kennisbank weet in formaten die AI-assistenten goed lezen, zoals een gehost llms.txt-bestand.
• Sales (vroege toegang, vanaf het Pro-abonnement) stelt de kwalificatievragen die je in gewone taal schrijft en biedt bezoekers die passen een afspraak aan.
• Search komt binnenkort. Het gaat antwoorden in plaats van het zoekvak in je documentatie, met bronnen.

Pagina’s die op de server worden gerenderd of statisch worden gegenereerd, zijn voor de crawler het makkelijkst te lezen. Rendert een deel van je site alleen in de browser, zorg dan dat de feiten die ertoe doen ook in de HTML staan die de server stuurt.

Hoe de agents een Next.js-site lezen

De kennisbank komt uit je openbare pagina’s, die de crawler van ASDK leest zoals een zoekmachine dat doet. Hij maakt zich bekend en volgt de regels in je robots.txt; de crawlerpagina legt uit hoe. Drie dingen bepalen hoe goed hij een Next.js-site leest:

• Wat de server stuurt. Pagina’s die statisch worden gegenereerd of op de server worden gerenderd, bevatten hun tekst in de HTML, en dat is het makkelijkste geval. Tekst die pas verschijnt na het ophalen van data aan de clientkant, kan ontbreken in wat de crawler ziet.
• Wat robots.txt toestaat. Blokkeert je robots.txt crawlers die hij niet kent, dan kan ASDK je pagina’s niet lezen. Sta hem expliciet toe, of controleer de regels voordat je je site toevoegt.
• Wat openbaar is. Documentatie achter een login, preview-deployments en pagina’s die zijn uitgesloten van zoekmachines blijven buiten de kennisbank, tenzij je hun inhoud als documenten uploadt.

Omdat elke agent vanuit deze kennisbank antwoordt, maken dezelfde pagina’s die zoekmachines helpen ook de antwoorden van de agents beter: een duidelijke prijspagina, concrete productpagina’s en een eerlijke FAQ.

Installeren in de App Router

Voeg het script toe aan je root-layout, app/layout.tsx, met de component 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 geeft extra attributen zoals data-site-id door aan de scripttag, en een script in de root-layout laadt één keer, hoe de bezoeker ook navigeert. De gids van Next.js over scripts laden legt de laadstrategieën uit (gecontroleerd in oktober 2026). afterInteractive is hier de juiste: de widget is niet nodig voordat de pagina interactief wordt.

Snel blijven

De widget is gebouwd om buiten je prestatiebudget te blijven:

• Hij zit niet in je bundle. Het script wordt gehost op cdn.asdk.com, dus het voegt niets toe aan je JavaScript-chunks en wordt bijgewerkt zonder nieuwe deploy van je site.
• Hij laadt nadat de pagina interactief is. Met afterInteractive laadt Next.js het script zodra de pagina op invoer kan reageren, dus het concurreert niet met je eigen code om de eerste render.
• Hij laadt één keer. In de root-layout overleeft het script navigatie aan de clientkant; wisselen tussen pagina’s downloadt het niet opnieuw.

Meet vooraf en achteraf met de tools die je al gebruikt, zoals Lighthouse of je real-user monitoring. Verschuift er een getal, dan kunnen de gids voor probleemoplossing en ons team je helpen uitzoeken waarom.

Andere opzetten

• Pages Router. Zet hetzelfde element Script in pages/_app.tsx, naast de paginacomponent, zodat elke pagina het krijgt.
• React met Vite of een vergelijkbare opzet. Plak de gewone scripttag in index.html, vlak voor de afsluitende body-tag. Voeg hem niet toe vanuit het effect van een component: React kan effecten in development twee keer uitvoeren, en de widget hoeft maar één keer te laden.
• Andere frameworks. Elk framework met een gedeelde layout of documenttemplate werkt op dezelfde manier: laad het script één keer, voor de hele site. De HTML-gids behandelt het algemene geval.

De installatiegids voor Next.js en React bevat de volledige code voor elke opzet.

De widget aanroepen vanuit je app

De widget voegt een globale functie asdk toe. Wil je die aanroepen voordat de widget is geladen, definieer dan eerst een kleine wachtrij, in index.html of met een inline Script dat een id heeft:

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

Geef daarna bijvoorbeeld na het inloggen de ingelogde persoon door, en vergeet die bij het uitloggen:

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

asdk("open") opent de chat vanaf je eigen knop ‘Praat met ons’.

Content Security Policy en nonces

Stuurt je site een Content Security Policy mee, sta dan https://cdn.asdk.com toe in script-src en https://api.asdk.com in connect-src. Gebruikt de policy nonces met 'strict-dynamic', dan worden hostnamen genegeerd en heeft het script in plaats daarvan de nonce van je pagina nodig: geef die door aan de prop nonce van de component Script.

De gids van Next.js over Content Security Policy laat zien hoe je per request een nonce maakt in proxy.ts en die uitleest in een Server Component (gecontroleerd in oktober 2026). Hij wijst ook op de keerzijde: nonces vereisen dynamische rendering, dus pagina’s die ze gebruiken kunnen niet statisch worden gegenereerd. Ons deel over CSP noemt de exacte bronnen die ASDK nodig heeft.

ASDK instellen op een Next.js-site

Wat beschikbaar is en wat binnenkort komt

ASDK als geheel is in vroege toegang: de agents werken en je kunt ze gebruiken, maar ze kunnen veranderen terwijl we ze verbeteren.