Cookie Consent Next.js : guide complet pour la conformité RGPD
Intégrer un mécanisme de consentement aux cookies dans une application Next.js est l'un des défis les plus courants pour les développeurs frontend soumis au RGPD. Entre les Server Components, le SSR et les scripts tiers, la gestion du consentement demande une approche rigoureuse. Ce guide vous explique comment mettre en place une solution conforme, performante et adaptée à l'architecture Next.js App Router.
Pourquoi le consentement aux cookies est critique dans Next.js
Next.js est utilisé par des milliers d'entreprises européennes pour des applications web à haute performance. Dès que votre application charge des scripts d'analytics (Google Analytics 4, Matomo), de publicité ou de réseaux sociaux, vous êtes soumis au RGPD et devez obtenir le consentement explicite de l'utilisateur avant tout dépôt de cookie non essentiel.
Les risques en cas de non-conformité sont concrets : amendes pouvant atteindre 4 % du chiffre d'affaires annuel mondial, réclamations d'associations de défense des droits numériques, et perte de confiance des utilisateurs. En 2024-2025, la CNIL a intensifié ses contrôles sur les sites utilisant Next.js avec des trackers non consentis.
Architecture Next.js et gestion du consentement : les défis spécifiques
Server Components vs Client Components
Avec l'App Router de Next.js 13+, la frontière entre Server Components et Client Components est cruciale pour le consentement. Les Server Components s'exécutent côté serveur et n'ont pas accès au localStorage ni aux cookies navigateur. La logique de consentement doit donc résider dans des Client Components (marqués 'use client').
- Server Components : ne peuvent pas lire le consentement utilisateur — utilisez des cookies HTTP pour passer l'état de consentement au serveur
- Client Components : peuvent accéder à document.cookie et localStorage — c'est ici que vit votre CMP
- Middleware Next.js : peut lire les cookies de consentement pour du conditional rendering côté serveur
Le problème du chargement des scripts tiers
Next.js fournit le composant <Script> avec plusieurs stratégies de chargement. Sans gestion du consentement, les scripts d'analytics se chargent immédiatement, ce qui est illégal selon le RGPD. La solution : conditionner le chargement à l'état de consentement.
Solution recommandée : intégrer FlowConsent dans Next.js
La méthode la plus simple et la plus robuste est d'utiliser une CMP certifiée comme FlowConsent, qui gère automatiquement le consentement, le Google Consent Mode v2 et la conformité TCF 2.2, sans que vous ayez à écrire de logique complexe.
Installation via le composant Script de Next.js
Ajoutez le script FlowConsent dans votre layout racine (app/layout.tsx) avec la stratégie 'beforeInteractive' pour garantir son chargement avant tout autre script :
// app/layout.tsx
Placez le Script FlowConsent avec strategy="beforeInteractive" et votre clé de projet dans la balise <head>. Cette stratégie assure que le banner de consentement s'affiche avant que tout cookie tiers soit déposé.
Bloquer les scripts tiers avant consentement
Avec FlowConsent, vous utilisez les attributs data-category pour catégoriser chaque script. Le script de la CMP bloque automatiquement les scripts jusqu'à ce que l'utilisateur donne son accord :
- data-category="analytics" → bloqué jusqu'au consentement analytics
- data-category="marketing" → bloqué jusqu'au consentement marketing
- data-category="functional" → bloqué jusqu'au consentement fonctionnel
Combinez cela avec la stratégie 'afterInteractive' de Next.js Script pour les scripts non essentiels — FlowConsent les intercepte avant leur exécution.
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Google Consent Mode v2 dans Next.js
Depuis mars 2024, Google Consent Mode v2 est obligatoire pour utiliser les produits Google Ads et Google Analytics en Europe. FlowConsent envoie automatiquement les signaux gtag('consent', 'update') appropriés après que l'utilisateur a fait son choix.
Pour les applications Next.js utilisant GA4, assurez-vous d'initialiser le Consent Mode en état 'denied' avant le chargement du tag Google. FlowConsent s'en charge automatiquement lorsque vous déclarez votre ID de mesure dans la configuration.
Intégration avec next/third-parties
Next.js 14+ introduit le package @next/third-parties pour simplifier l'intégration de GA4 et autres services. Combinez-le avec FlowConsent pour une conformité automatique :
- Initialisez FlowConsent avant tout script tiers
- Utilisez GoogleAnalytics de @next/third-parties avec strategy='afterInteractive'
- FlowConsent intercepte et conditionne le chargement au consentement
Gestion du consentement avec les cookies HTTP (SSR)
Pour les applications Next.js qui font du rendu serveur personnalisé en fonction du consentement (ex. : ne pas charger certains composants si l'utilisateur n'a pas consenti), vous pouvez utiliser les cookies HTTP :
- FlowConsent stocke l'état de consentement dans un cookie (ex. fc_consent=granted:analytics,marketing)
- Le Middleware Next.js peut lire ce cookie et adapter le rendu côté serveur
- Utilisez cookies() de next/headers dans les Server Components pour accéder à l'état
Cette approche garantit que même en SSR, aucune donnée personnelle n'est traitée sans consentement valide.
Conformité RGPD : les points de contrôle essentiels
Checklist conformité Next.js + RGPD
- ✅ Aucun cookie non essentiel déposé avant consentement (vérifiable avec les DevTools navigateur)
- ✅ Banner de consentement visible au premier accès, sans pré-cochage
- ✅ Option de refus aussi accessible que l'option d'acceptation
- ✅ Google Consent Mode v2 initialisé en 'denied' par défaut
- ✅ Enregistrement de la preuve de consentement (date, version, choix)
- ✅ Possibilité de retirer le consentement à tout moment
- ✅ Politique de confidentialité à jour et accessible depuis le banner
Tester la conformité
Utilisez les outils suivants pour vérifier votre implémentation :
- Cookie Checker de la CNIL : analyse les cookies déposés sur votre site
- Google Tag Assistant : vérifie l'état du Consent Mode v2
- DevTools Réseau : filtrez sur 'Cookie' pour voir les cookies déposés avant/après consentement
- Lighthouse : audit de performance (le banner ne doit pas dégrader le score)
Get GDPR compliant in 10 minutes
Free plan available · No credit card required
Cas d'usage avancés
Consentement et Dynamic Imports
Si vous utilisez dynamic() de Next.js pour charger des composants conditionnellement, vous pouvez conditionner leur import au consentement :
Utilisez un state React qui écoute les événements de consentement de FlowConsent (fc:consent-update) et chargez dynamiquement les composants nécessitant des données d'analytics uniquement après accord.
Internationalisation (i18n) et consentement
Next.js supporte nativement l'i18n. FlowConsent détecte automatiquement la locale de l'utilisateur (fr, en, de, es, etc.) et affiche le banner dans la langue appropriée, sans configuration supplémentaire.
Mode headless / API Routers
Pour les applications Next.js en mode headless (frontend découplé d'un CMS), les API Routes peuvent recevoir des requêtes de traitement de données. Assurez-vous que vos routes API vérifient le consentement stocké en cookie avant de traiter des données analytiques.
Performance et Core Web Vitals
Le consentement ne doit pas dégrader votre score Core Web Vitals. Quelques bonnes pratiques avec FlowConsent :
- Utilisezstrategy='beforeInteractive' uniquement pour le script de consentement, pas pour les scripts bloqués
- Le banner FlowConsent est optimisé pour le LCP : HTML léger, CSS critique inline
- Les scripts tiers bloqués ne consomment pas de bande passante avant consentement → améliore le FCP
- Configurez le cache du banner via les headers Next.js pour éviter les re-téléchargements
Conclusion
Intégrer la conformité RGPD dans une application Next.js n'est pas une option — c'est une obligation légale. Avec FlowConsent, vous bénéficiez d'une CMP certifiée, compatible Next.js App Router, qui gère automatiquement le Google Consent Mode v2, le TCF 2.2 et la preuve de consentement. En quelques lignes de configuration, votre application est conforme.
Commencez avec un essai gratuit sur flowconsent.com et assurez la conformité de votre application Next.js en moins d'une heure.
Questions fréquentes
Comment bloquer Google Analytics avant le consentement dans Next.js ?
Dans Next.js, utilisez le composant Script avec strategy="afterInteractive" pour GA4 et conditionnez son rendu à l'état de consentement. Avec FlowConsent, ajoutez l'attribut data-category="analytics" à votre script GA4 — la CMP intercepte automatiquement son chargement jusqu'à ce que l'utilisateur accepte. Alternativement, utilisez un état React qui se met à jour après l'événement fc:consent-update et rendez le composant GoogleAnalytics de @next/third-parties conditionnellement.
Quelle stratégie Next.js Script utiliser pour une CMP comme FlowConsent ?
Utilisez strategy="beforeInteractive" pour le script FlowConsent lui-même — cela garantit que la CMP se charge en tout premier, avant que le navigateur exécute d'autres scripts. Pour les scripts tiers bloqués par la CMP (analytics, publicité), utilisez strategy="afterInteractive" ou "lazyOnload". Ne jamais mettre la CMP en "afterInteractive" car cela créerait une fenêtre temporelle où des scripts tiers pourraient s'exécuter sans consentement.
Le Google Consent Mode v2 fonctionne-t-il avec les Server Components de Next.js ?
Le Consent Mode v2 est une technologie côté client (il envoie des signaux via gtag dans le navigateur) et ne s'applique pas directement aux Server Components. Cependant, pour les traitements côté serveur (API Routes, Server Actions), vous pouvez lire l'état de consentement depuis le cookie HTTP défini par FlowConsent (fc_consent) via la fonction cookies() de next/headers. Cela permet de conditionner les traitements de données serveur au consentement de l'utilisateur.
Comment tester la conformité RGPD d'une application Next.js ?
Pour tester votre conformité RGPD Next.js : 1) Ouvrez votre site en navigation privée et vérifiez qu'aucun cookie non essentiel n'est déposé avant le consentement (onglet Application des DevTools). 2) Utilisez Google Tag Assistant pour vérifier les signaux Consent Mode v2. 3) Testez avec le Cookie Checker de la CNIL. 4) Vérifiez que le banner s'affiche correctement sur mobile et desktop. 5) Testez le refus total et vérifiez qu'aucun script analytics ne se charge. 6) Utilisez Lighthouse pour l'impact sur les Core Web Vitals.
FlowConsent fonctionne-t-il avec le Next.js App Router ?
Oui. FlowConsent est compatible avec le Next.js App Router (Next.js 13+). Intégrez-le dans votre app/layout.tsx via le composant <Script> de next/script avec strategy="beforeInteractive". FlowConsent fonctionne comme un Client Component natif : il interagit avec le DOM du navigateur et ne nécessite aucune logique serveur spécifique. L'event fc:consent-update peut être écouté dans vos Client Components pour réagir aux choix de l'utilisateur en temps réel.