Ajouter un chatbot sur un site Next.js avec next/script

Dans un site construit avec Next.js, le script d'un chatbot s'ajoute avec le composant Script du module next/script, et non avec une balise <script> brute. Pour un widget de chat, la stratégie à retenir est lazyOnload : la documentation de Next.js la recommande explicitement pour les « chat support plugins ». Le script se charge alors quand le navigateur a fini le reste, sans concurrencer l'affichage de la page.

Les faits ci-dessous viennent de la référence officielle du composant Script, dans sa version mise à jour le 21/08/2026 (routeur app).

Les quatre stratégies de chargement

Attention au piège du défaut : sans attribut strategy, le script part en afterInteractive. Écrivez donc lazyOnload explicitement.

Où placer le composant

D'après la documentation, un script lazyOnload (ou afterInteractive) placé dans une page ou un layout ne se charge et ne s'exécute que lorsque cette page, ou ce groupe de pages, est ouvert. Deux cas :

• sur tout le site : placez le composant dans le layout racine (app/layout.tsx ou app/layout.js) ;
• sur une partie du site : placez-le dans le layout d'un groupe de pages (par exemple les pages de contact et de tarifs), ou dans une page précise.

C'est la façon propre, en Next.js, de réserver l'assistant aux pages où il sert.

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="fr">
      <body>
        {children}
        <Script
          src="https://fournisseur.exemple/widget.js"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

L'adresse du script est un exemple : remplacez-la par celle de votre outil, et ajoutez les attributs de configuration qu'il demande.

Lancer le widget après son chargement

Certains outils demandent d'appeler une fonction une fois leur script chargé (pour passer un identifiant ou une langue, par exemple). Next.js prévoit trois propriétés :

• onLoad : exécute du code une fois le script chargé, avec afterInteractive ou lazyOnload ;
• onReady : exécute du code après le chargement, puis à chaque nouveau montage du composant, par exemple après une navigation ;
• onError : intercepte un échec de chargement, utile pour journaliser un widget qui ne répond pas.

La documentation précise que ces trois propriétés ne fonctionnent pas encore dans les composants serveur : le composant qui les utilise doit être un composant client ('use client').

Navigation sans rechargement

Un site Next.js change souvent de page sans recharger le document. La documentation note qu'un script beforeInteractive ne s'exécute qu'une fois par chargement de document. Pour un widget qui doit réagir à chaque changement de page (afficher un message différent selon la page, par exemple), c'est onReady qu'il faut regarder. Vérifiez aussi dans la documentation de l'outil s'il gère lui-même les changements d'adresse.

Les en-têtes de sécurité

Si le site définit une politique de sécurité du contenu (en-tête Content-Security-Policy), le widget doit y être autorisé : script-src pour son fichier, connect-src pour ses échanges, frame-src s'il affiche une iframe, style-src pour ses styles (documentation MDN). Un domaine oublié bloque le widget sans message visible pour le visiteur : voir la liste des causes quand un chatbot ne s'affiche pas.

Le consentement

Si le widget dépose un cookie dès son chargement, il doit attendre l'accord du visiteur. Next.js cite les gestionnaires de consentement parmi les scripts à charger en beforeInteractive : le gestionnaire est alors prêt avant le widget, qui peut être conditionné à son accord. Les règles sont sur chatbot et consentement aux cookies.

Liste de contrôle

1. Composant Script de next/script, stratégie lazyOnload écrite explicitement.
2. Placé dans le layout racine, ou dans le layout des seules pages voulues.
3. Code d'initialisation dans onLoad ou onReady, dans un composant client.
4. Domaines du widget ajoutés à la politique de sécurité du contenu.
5. Test après navigation entre plusieurs pages, sans rechargement.
6. Cookies vérifiés avant tout clic sur la bulle.