Ajouter des agents IA à un site Next.js avec ASDK

Les équipes qui construisent leur site marketing en Next.js tiennent en général à deux choses quand elles ajoutent un script tiers : il ne doit pas ralentir le site, et il ne doit pas se battre avec leur routage. ASDK est un script hébergé unique, chargé de façon asynchrone, qui suit de lui-même la navigation côté client et se configure depuis le tableau de bord : il suffit d’un composant dans votre layout racine, sans modification route par route.

Ce qu’ASDK apporte à un site Next.js

ASDK construit une base de connaissances unique à partir de vos pages publiques, lues comme un moteur de recherche les lit, et des documents que vous importez. Chaque agent que vous activez y puise ses réponses.

• Chat (accès anticipé, dès le forfait Free) répond aux visiteurs à partir de votre documentation, de vos tarifs et de vos pages produits, renvoie vers les pages dont provient chaque réponse et propose de prendre leurs coordonnées quand il ne peut pas les aider.
• Agent-Ready (accès anticipé, dès le forfait Free) publie ce que sait votre base de connaissances dans des formats que les assistants IA lisent bien, comme un fichier llms.txt hébergé.
• Sales (accès anticipé, à partir du forfait Pro) pose les questions de qualification que vous rédigez en langage courant et propose un rendez-vous aux visiteurs qui correspondent.
• Search arrive bientôt. Il répondra à la place du champ de recherche de votre documentation, sources à l’appui.

Les pages rendues côté serveur ou générées statiquement sont les plus faciles à lire pour le robot d’exploration. Si certaines parties de votre site ne s’affichent que dans le navigateur, vérifiez que les faits importants figurent aussi dans le HTML envoyé par le serveur.

Comment les agents lisent un site Next.js

La base de connaissances provient de vos pages publiques, que le robot d’exploration d’ASDK lit comme le fait un moteur de recherche. Il s’identifie et respecte les règles de votre robots.txt ; la page du robot explique comment. Trois éléments déterminent la qualité de sa lecture d’un site Next.js :

• Ce qu’envoie le serveur. Les pages générées statiquement ou rendues côté serveur contiennent leur texte dans le HTML : c’est le cas le plus simple. Le texte qui n’apparaît qu’après une récupération de données côté client peut manquer à ce que voit le robot.
• Ce qu’autorise robots.txt. Si votre robots.txt bloque les robots qu’il ne connaît pas, ASDK ne peut pas lire vos pages. Autorisez-le explicitement, ou vérifiez les règles avant d’ajouter votre site.
• Ce qui est public. La documentation derrière une connexion, les déploiements de préproduction et les pages exclues de la recherche restent hors de la base, sauf si vous importez leur contenu sous forme de documents.

Comme chaque agent répond à partir de cette base de connaissances, les pages qui aident les moteurs de recherche améliorent aussi les réponses des agents : une page de tarifs claire, des pages produits précises et une FAQ honnête.

Installer avec l’App Router

Ajoutez le script à votre layout racine, app/layout.tsx, avec le composant 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 transmet les attributs supplémentaires comme data-site-id à la balise script, et un script placé dans le layout racine ne se charge qu’une fois, quelle que soit la navigation du visiteur. Le guide Next.js sur le chargement des scripts explique les stratégies de chargement (vérifié en octobre 2026). afterInteractive est la bonne ici : le widget n’est pas nécessaire avant que la page ne devienne interactive.

Rester rapide

Le widget est conçu pour ne pas peser sur votre budget de performance :

• Il n’est pas dans votre bundle. Le script est hébergé sur cdn.asdk.com : il n’ajoute rien à vos chunks JavaScript et se met à jour sans redéploiement de votre site.
• Il se charge une fois la page interactive. Avec afterInteractive, Next.js charge le script dès que la page peut répondre aux interactions : il n’entre pas en concurrence avec votre propre code pour le premier rendu.
• Il se charge une seule fois. Dans le layout racine, le script survit à la navigation côté client ; passer d’une page à l’autre ne le télécharge pas à nouveau.

Mesurez avant et après avec les outils que vous utilisez déjà, comme Lighthouse ou votre suivi des utilisateurs réels. Si un chiffre bouge, le guide de dépannage et notre équipe peuvent vous aider à en trouver la cause.

Autres configurations

• Pages Router. Placez le même élément Script dans pages/_app.tsx, à côté du composant de page, pour que chaque page le reçoive.
• React avec Vite ou une configuration comparable. Collez la simple balise script dans index.html, juste avant la balise body de fermeture. Ne l’ajoutez pas depuis l’effet d’un composant : React peut exécuter les effets deux fois en développement, et le widget n’a besoin de se charger qu’une fois.
• Autres frameworks. Tout framework doté d’un layout partagé ou d’un modèle de document fonctionne de la même façon : chargez le script une fois, pour tout le site. Le guide HTML couvre le cas général.

Le guide d’installation pour Next.js et React donne le code complet de chaque cas.

Appeler le widget depuis votre application

Le widget ajoute une fonction globale asdk. Pour l’appeler avant que le widget ne soit chargé, définissez d’abord une petite file d’attente, dans index.html ou avec un Script en ligne doté d’un id :

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

Ensuite, par exemple, transmettez la personne connectée après la connexion, et oubliez-la à la déconnexion :

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

asdk("open") ouvre le chat depuis votre propre bouton « Parlez-nous ».

Content Security Policy et nonces

Si votre site envoie une Content Security Policy, autorisez https://cdn.asdk.com dans script-src et https://api.asdk.com dans connect-src. Si la politique utilise des nonces avec 'strict-dynamic', les noms d’hôte sont ignorés et le script a besoin du nonce de votre page : transmettez-le à la prop nonce du composant Script.

Le guide Next.js sur la Content Security Policy montre comment créer un nonce par requête dans proxy.ts et le lire dans un Server Component (vérifié en octobre 2026). Il signale aussi le compromis : les nonces exigent un rendu dynamique, et les pages qui les utilisent ne peuvent donc pas être générées statiquement. Notre section CSP liste les sources exactes dont ASDK a besoin.

Installer ASDK sur un site Next.js

Ce qui est disponible et ce qui arrive bientôt

ASDK dans son ensemble est en accès anticipé : les agents fonctionnent et vous pouvez les utiliser, mais ils peuvent évoluer à mesure que nous les améliorons.