TL;DR
Un site Next.js qui intègre Google Analytics, le Meta Pixel ou tout autre outil de tracking doit collecter le consentement des visiteurs avant d'activer ces scripts, conformément au RGPD. La simple affichage d'une bannière ne suffit pas : vous devez bloquer les scripts tiers jusqu'à l'accord explicite de l'utilisateur, stocker la preuve de ce consentement et implémenter les signaux Google Consent Mode v2. Ce guide explique comment faire cela correctement dans une application Next.js.
Pourquoi la conformité cookies est critique pour une app Next.js ?
Next.js est un framework React utilisé pour construire des sites et applications web modernes, souvent déployés via des plateformes comme Vercel ou Netlify. Sa flexibilité en fait un choix populaire pour les sites e-commerce, les SaaS et les sites éditoriaux.
Ce même niveau de flexibilité signifie que les développeurs intègrent facilement des dizaines de scripts tiers : Google Analytics 4, Google Tag Manager, Meta Pixel, Hotjar, Intercom, etc. Chacun de ces outils dépose des cookies qui nécessitent le consentement préalable de l'utilisateur selon le RGPD et les lignes directrices de la CNIL.
Le risque principal : charger ces scripts dans _app.tsx ou via un composant Layout sans aucune vérification de consentement. Ce pattern est très courant et constitue une violation du RGPD.
Ce que le RGPD exige pour les cookies dans une app Next.js
Le RGPD (et la directive ePrivacy) impose trois obligations principales pour les cookies non essentiels : informer clairement l'utilisateur, collecter son consentement avant d'activer les traceurs, et lui permettre de retirer ce consentement aussi facilement qu'il l'a donné.
Quels cookies nécessitent un consentement dans Next.js ?
La majorité des outils tiers intégrés dans une app Next.js nécessitent un consentement. Les catégories concernées :
- Mesure d'audience : Google Analytics 4, Plausible (en mode standard), Matomo (en mode standard)
- Marketing et publicité : Meta Pixel, LinkedIn Insight Tag, Google Ads, TikTok Pixel
- Expérience utilisateur : Hotjar, FullStory, LogRocket, Microsoft Clarity
- Support et chat : Intercom, Drift, HubSpot Chat
Les cookies strictement nécessaires au fonctionnement de l'application (session, authentification, panier) sont exempts de consentement.
Les 3 obligations fondamentales
- Informer : décrire clairement quels cookies sont utilisés, pourquoi et par qui, avant tout dépôt.
- Collecter le consentement : obtenir un accord libre, spécifique, éclairé et univoque. Pas de case pré-cochée, pas de consentement implicite par défilement.
- Respecter le choix : ne pas charger les scripts refusés, permettre le retrait à tout moment, renouveler le consentement tous les 6 mois selon la CNIL (durée maximale du cookie de consentement : 13 mois).
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Comment implémenter une bannière de cookies conforme dans Next.js
Il existe deux approches principales pour gérer le consentement dans une application Next.js : utiliser une CMP (Consent Management Platform) dédiée ou construire la solution vous-même.
Option 1 : utiliser une CMP (approche recommandée)
Une CMP comme FlowConsent gère automatiquement l'affichage de la bannière, la collecte du consentement, le blocage des scripts tiers et l'envoi des signaux Consent Mode v2 à Google. L'intégration dans Next.js se fait via un script injecté dans le composant Head ou via le Script component de Next.js avec la stratégie beforeInteractive.
Avantage principal : la CMP s'occupe de la logique de consentement, du stockage, des traductions et de la mise à jour en cas d'évolution réglementaire. Vous n'avez pas à maintenir cette logique vous-même.
Option 2 : construire la solution vous-même
Construire votre propre bannière de consentement est techniquement possible dans Next.js via un composant React et un Context ou store global. Cependant, les limitations sont importantes :
- Vous devez implémenter vous-même le blocage des scripts, les signaux Consent Mode v2, le stockage sécurisé du consentement, et la logique de renouvellement.
- Chaque mise à jour réglementaire (CNIL, ICO, BfDI) nécessite une intervention technique.
- La preuve de consentement (timestamp, version de la bannière, choix de l'utilisateur) doit être stockée de manière fiable.
Le blocage des scripts jusqu'au consentement
Le pattern fondamental dans Next.js consiste à conditionner le chargement des scripts tiers à l'état du consentement. Avec le composant Script de Next.js, la stratégie afterInteractive doit être conditionnée par une vérification de consentement dans l'état de l'application.
Sans cette condition, GTM ou GA4 se charge au démarrage de la page, avant même que la bannière ne s'affiche. C'est la violation la plus courante dans les applications Next.js.
Google Consent Mode v2 et Next.js
Google Consent Mode v2 est requis depuis mars 2024 pour les annonceurs qui utilisent Google Ads ou GA4 avec le remarketing. Il permet de transmettre à Google des signaux d'état de consentement (analytics_storage, ad_storage, ad_user_data, ad_personalization) même quand l'utilisateur refuse les cookies.
Dans Next.js, l'implémentation peut se faire via Google Tag Manager (recommandé pour les sites sans équipe technique dédiée) ou via une intégration directe de gtag.js. Dans les deux cas, les signaux de consentement doivent être envoyés avant toute initialisation des tags Google.
Notre guide complet sur Google Consent Mode v2 couvre l'implémentation technique étape par étape, y compris les configurations GTM adaptées aux applications JavaScript modernes.
Erreurs fréquentes dans la gestion des cookies Next.js
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Checklist de conformité cookies pour Next.js
- Auditer tous les scripts tiers chargés dans l'application (Next.js Script component, GTM, imports directs).
- Catégoriser chaque cookie : strictement nécessaire, fonctionnel, analytique, marketing.
- Intégrer une CMP ou un composant de consentement qui bloque les scripts non essentiels par défaut.
- Vérifier que les scripts tiers (GA4, GTM, Meta Pixel) ne se chargent qu'après consentement explicite.
- Implémenter les signaux Google Consent Mode v2 (analytics_storage, ad_storage, ad_user_data, ad_personalization).
- Stocker le consentement de manière sécurisée avec timestamp, version de la bannière et choix par catégorie.
- Prévoir un mécanisme de renouvellement du consentement tous les 6 mois.
- Ajouter un lien de modification des préférences accessible depuis toutes les pages.
- Tester la bannière en navigation privée et vérifier qu'aucun cookie non essentiel n'est déposé avant consentement.
- Effectuer un audit régulier des cookies avec un outil dédié.
Pour vérifier les cookies actuellement déposés par votre site, notre guide d'audit de cookies détaille la méthode complète.
Conclusion
La conformité RGPD dans une application Next.js repose sur un principe simple : aucun script non essentiel ne doit s'exécuter avant le consentement de l'utilisateur. La flexibilité de Next.js facilite l'intégration de traceurs, mais elle impose aussi une vigilance constante sur ce qui se charge et quand.
La solution la plus fiable reste d'utiliser une CMP dédiée qui gère automatiquement le blocage des scripts, les signaux Consent Mode v2 et la preuve de consentement. Commencez par scanner les cookies de votre site Next.js sur FlowConsent pour identifier exactement quels traceurs nécessitent une action.
Questions fréquentes
Est-ce qu'un site Next.js a besoin d'une bannière de cookies même s'il n'utilise que Google Analytics ?
Oui. Google Analytics 4 dépose des cookies de mesure d'audience qui ne sont pas strictement nécessaires au fonctionnement du site. Selon le RGPD et les lignes directrices de la CNIL, leur dépôt requiert le consentement préalable de l'utilisateur. Le fait d'utiliser Next.js ne change pas cette obligation.
Comment bloquer Google Tag Manager dans Next.js avant le consentement ?
La solution la plus fiable consiste à charger GTM de manière conditionnelle via un état de consentement global (Context React ou store). Le Script component de Next.js avec strategy='afterInteractive' doit être rendu conditionnel : le composant ne monte que si l'utilisateur a donné son accord pour les catégories concernées. Une CMP dédiée gère cette logique automatiquement.
Peut-on utiliser Plausible ou Matomo sans bannière de cookies dans Next.js ?
C'est possible dans certaines conditions. Plausible Analytics ne dépose pas de cookies par défaut et peut être exempté de consentement s'il est configuré sans identification des utilisateurs. Matomo peut être exempté si l'anonymisation des IP est activée et que les données ne sont pas partagées avec des tiers, conformément aux conditions d'exemption de la CNIL. Vérifiez la configuration exacte de l'outil avant de décider de l'exemption.
Quelle est la durée maximale d'un cookie de consentement dans une app Next.js ?
Selon les recommandations de la CNIL, le cookie qui stocke le choix de l'utilisateur ne doit pas dépasser 13 mois. Au-delà, le consentement est considéré comme périmé et doit être recollecté. Le renouvellement de la bannière doit donc être déclenché au plus tard 6 mois après le dernier consentement pour rester dans les clous.