Cookiequiet

FonctionnalitésTarifsOutils gratuitsLoisPlateformesComparatifsGuidesBlogFAQGlossaire
ENCommencer gratuitementSe connecter
Plateformes

Comment ajouter un bandeau cookies à une application Next.js

Dans un projet Next.js avec l’App Router, rendez la balise avec next/script dans app/layout.tsx avec strategy="beforeInteractive", ce qui l’injecte dans le head avant tout code Next.js ; avec le Pages Router, le même composant va dans pages/_document.tsx. Marquez les balises Google et Meta avec type="text/plain" et data-cq-category dans le HTML rendu côté serveur, ou laissez la balise Google se charger en Consent Mode avec des signaux refusés par défaut.
Publié le 20 octobre 2026 · Par l’équipe Cookiequiet

Étapes

Ajouter le composant Script au layout racineDans app/layout.tsx, importez Script depuis next/script et rendez-le avec src réglé sur https://cookiequiet.com/cq.js, strategy="beforeInteractive" et les attributs data-site, data-consent-mode et data-auto-block. Next.js transmet les attributs data à la balise script finale et l’injecte dans le head.
Pages Router : utiliser _documentSi le projet utilise le Pages Router, rendez le même composant Script dans pages/_document.tsx. La stratégie beforeInteractive n’est autorisée que dans le layout racine ou dans _document.
Rendre les balises marquées côté serveurPlacez le pixel Meta ou une balise Google écrite à la main dans le layout racine sous forme d’éléments script ordinaires avec type="text/plain" et data-cq-category, pour qu’ils figurent dans le HTML initial. Cookiequiet les active quand la catégorie est accordée ou quand un choix enregistré est appliqué au chargement.
Ou faire tourner la balise Google en Consent ModePour que Google Analytics ou Google Ads continue de se charger avec des signaux refusés par défaut, rendez un Script inline beforeInteractive doté d’un id et contenant le bloc de consentement par défaut de Google, puis la balise Google avec la stratégie afterInteractive par défaut, par exemple via @next/third-parties.
Conditionner les composants client au consentementPour un lecteur YouTube ou un widget de chat rendu par React, lisez window.Cookiequiet.get() et abonnez-vous avec window.Cookiequiet.on() dans un composant client, et ne rendez le contenu embarqué que lorsque la catégorie est accordée.
Ajouter le lien Préférences de cookiesDans le composant de pied de page, rendez une ancre ordinaire avec href="#cq-preferences" et l’attribut data-cq-show-preferences.
Tester avec Tout refuserLancez l’application, ouvrez-la dans une fenêtre de navigation privée, cliquez sur Tout refuser et vérifiez qu’aucun cookie _ga ou _fbp n’est déposé. Acceptez tout, rechargez et confirmez que les balises se chargent. Les deux choix apparaissent dans le registre des consentements.

Où charger la balise dans Next.js

Next.js documente la stratégie beforeInteractive de next/script pour les gestionnaires de consentement aux cookies : le script est injecté dans le HTML initial, dans le head, récupéré avant tout module Next.js et exécuté dans l’ordre où il a été placé, sans bloquer l’hydratation. Il doit vivre dans un layout racine (app/layout.tsx, ou app/[locale]/layout.tsx avec un routage internationalisé). Next.js transmet les attributs data-* à la balise script finale.

tsx
// app/layout.tsx
import Script from "next/script";
​
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cookiequiet.com/cq.js"
          strategy="beforeInteractive"
          data-site="YOUR_SITE_KEY"
          data-consent-mode="1"
          data-auto-block="1"
        />
      </body>
    </html>
  );
}

Les scripts dotés de cette stratégie sont injectés dans le head quel que soit l’endroit où vous placez le composant, et ils s’exécutent une fois par chargement de document : les navigations côté client ne les relancent pas, ce qui est le comportement voulu. Avec le Pages Router, rendez le même composant dans pages/_document.tsx. Vous pouvez lire la clé depuis process.env.NEXT_PUBLIC_COOKIEQUIET_SITE plutôt que de l’écrire dans le fichier.

Comment gérer les balises que votre application charge

Une application React diffère d’un CMS sur un point qui compte : les balises ajoutées après le chargement de la page ne figurent pas dans le HTML initial. Cookiequiet active les scripts marqués quand un choix enregistré est appliqué au chargement et à chaque fois que le visiteur fait un choix ; les balises marquées ont donc leur place dans le HTML rendu côté serveur.

Balises marquées dans le layout racine. Rendez-les comme des éléments script ordinaires dans le layout, pas via next/script :

tsx
<script
  type="text/plain"
  data-cq-category="marketing"
  dangerouslySetInnerHTML={{ __html: "/* code de base du pixel Meta, inchangé, copié depuis Events Manager */" }}
/>

Cookiequiet les transforme en vrais scripts une fois la catégorie accordée. Voir le guide Meta Pixel pour le code de base complet et la mise en garde sur le noscript.

Balises Google en Consent Mode. Si vous préférez que Google Analytics 4 ou Google Ads se charge avec des signaux refusés par défaut et envoie des pings sans cookies jusqu’au consentement, ajoutez le bloc de consentement par défaut de Google comme script inline beforeInteractive (un id est obligatoire pour les scripts inline), puis chargez la balise Google normalement, par exemple avec les composants GoogleAnalytics ou GoogleTagManager de @next/third-parties, qui utilisent la stratégie afterInteractive par défaut :

tsx
<Script id="cq-consent-defaults" strategy="beforeInteractive">
  {"window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', { ad_storage: 'denied', ad_user_data: 'denied', ad_personalization: 'denied', analytics_storage: 'denied', functionality_storage: 'denied', personalization_storage: 'denied', security_storage: 'granted', wait_for_update: 500 });"}
</Script>

Cookiequiet pousse les mêmes valeurs par défaut dès qu’il s’exécute et la commande consent update après chaque choix ; le bloc inline ne sert qu’à garantir l’ordre quand la balise Google est chargée par un autre mécanisme. Le guide Google Tag Manager couvre le conteneur et l’événement cq_consent.

Composants qui dépendent du consentement. Pour un lecteur YouTube, une carte ou un widget de chat rendu par React, lisez le choix depuis l’API publique dans un composant client :

tsx
"use client";
import { useEffect, useState } from "react";
​
export function useConsent(category: string) {
  const [granted, setGranted] = useState(false);
  useEffect(() => {
    const api = (window as any).Cookiequiet;
    if (api === undefined) return;
    const current = api.get();
    setGranted(current ? current.c.includes(category) : false);
    return api.on((s: { c: string[] }) => setGranted(s.c.includes(category)));
  }, [category]);
  return granted;
}

get() renvoie le choix enregistré avec ses catégories dans c, et on() renvoie une fonction de désabonnement. Ne rendez l’iframe que lorsque useConsent("marketing") vaut true ; sinon, affichez un espace réservé avec un bouton qui appelle window.Cookiequiet.showPreferences(). Pour les iframes ordinaires dans des composants serveur, data-cq-src à la place de src suffit.

Comment ajouter le lien Préférences de cookies

Rendez une ancre ordinaire dans le composant de pied de page ; un lien avec un dièse n’a pas besoin de next/link :

tsx
<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>

Comment tester

  1. Lancez l’application (next dev convient ; le bandeau récupère sa configuration depuis cookiequiet.com) et ouvrez-la dans une fenêtre de navigation privée.
  2. Cliquez sur « Tout refuser ». Dans les outils de développement, les cookies doivent se limiter à cq_consent et à vos propres cookies de session : pas de _ga, pas de _fbp.
  3. Effacez les cookies, cliquez sur « Tout accepter », rechargez : les scripts marqués s’exécutent et la balise Google reçoit analytics_storage: granted.
  4. Naviguez entre les routes : le bandeau ne réapparaît pas et le choix reste appliqué.
  5. Consultez le registre des consentements dans le tableau de bord.

Ce qui est propre à Next.js

  • Un layout racine, une balise. Ne rendez pas aussi le composant Script dans des layouts imbriqués ; Next.js n’autorise beforeInteractive que dans un layout racine, et une seconde copie serait ignorée ou dupliquée.
  • Content Security Policy. Avec une politique à base de nonce, passez le nonce au composant Script ; autorisez https://cookiequiet.com dans script-src et connect-src (la configuration, la géolocalisation et les enregistrements de consentement sont récupérés depuis cette origine).
  • Export statique et runtimes edge. Le bandeau est un script client sans dépendance serveur ; output: "export" fonctionne.
  • Routage internationalisé. La langue du bandeau suit le navigateur du visiteur, pas la locale de la route ; chaque texte est modifiable par langue dans le tableau de bord.

Pour un site statique construit avec Next.js, l’article sur les bandeaux cookies pour sites statiques couvre l’hébergement sur Vercel ou Netlify.

Questions

Les scripts afterInteractive sont injectés côté client après l’hydratation, donc des balises rendues dans le HTML pourraient s’exécuter avant. Les scripts beforeInteractive figurent dans le HTML initial, dans le head, et s’exécutent avant tout code Next.js, ce qui est l’ordre dont un script de consentement a besoin. Next.js cite les gestionnaires de consentement aux cookies comme cas d’usage typique.
Next.js ne prend en charge la stratégie beforeInteractive que dans un layout racine (ou dans pages/_document.tsx avec le Pages Router), parce que le script est injecté dans le HTML initial de chaque page. Un layout imbriqué ne peut pas le faire.
Oui. Rendez le même composant Script avec strategy="beforeInteractive" dans pages/_document.tsx ; les attributs data sont transmis de la même façon.
Lisez window.Cookiequiet.get() et abonnez-vous avec window.Cookiequiet.on() dans un composant client, comme dans le hook useConsent ci-dessus, et ne rendez l’iframe que lorsque la catégorie marketing est accordée. Pour les iframes dans des composants serveur, écrivez data-cq-src au lieu de src et Cookiequiet les charge après le consentement.

Sources

Sur le même sujet

Cookie banner for Nuxt: add Cookiequiet with app.head.scriptDeclare the Cookiequiet snippet in nuxt.config.ts under app.head.script or with useHead, mark your tags as head entries, gate components and test.Cookie banner for Astro: add Cookiequiet to the layout headPut the Cookiequiet snippet in your Astro layout head with is:inline, mark Google and Meta tags there, handle the ClientRouter and test Reject all.Google Tag Manager and Cookiequiet: Consent Mode v2 and the cq_consent triggerLoad Cookiequiet above the GTM snippet with denied defaults, keep Google tags on their built-in checks and trigger other tags on the cq_consent event.
Retour à la rubrique Plateformes

Mettez un bandeau discret sur votre site dès aujourd’hui

Gratuit pour un site avec toutes les fonctions essentielles, sans carte ni période d’essai qui expire. Passez un site en Starter pour €3 par mois pour le mettre à vos couleurs par IA sans la mention Cookiequiet, ou en Pro pour €9 pour le concevoir avec l’agent IA.
Commencer gratuitement, sans carteVoir les tarifs