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.
Frequently asked questions
How to block Google Analytics before consent in Next.js?
In Next.js, use the Script component with strategy="afterInteractive" for GA4 and condition its rendering on consent state. With FlowConsent, add the data-category="analytics" attribute to your GA4 script — the CMP automatically intercepts its loading until the user accepts. Alternatively, use a React state that updates after the fc:consent-update event and conditionally render the GoogleAnalytics component from @next/third-parties.
Which Next.js Script strategy should be used for a CMP like FlowConsent?
Use strategy="beforeInteractive" for the FlowConsent script itself — this ensures the CMP loads first, before the browser executes other scripts. For third-party scripts blocked by the CMP (analytics, advertising), use strategy="afterInteractive" or "lazyOnload". Never put the CMP in "afterInteractive" as this would create a time window where third-party scripts could execute without consent.
Does Google Consent Mode v2 work with Next.js Server Components?
Consent Mode v2 is a client-side technology (it sends signals via gtag in the browser) and does not apply directly to Server Components. However, for server-side processing (API Routes, Server Actions), you can read the consent state from the HTTP cookie set by FlowConsent (fc_consent) via the cookies() function from next/headers. This allows conditioning server-side data processing on user consent.
How to test GDPR compliance of a Next.js application?
To test your Next.js GDPR compliance: 1) Open your site in private browsing and verify no non-essential cookies are placed before consent (DevTools Application tab). 2) Use Google Tag Assistant to verify Consent Mode v2 signals. 3) Test with the CNIL Cookie Checker. 4) Verify the banner displays correctly on mobile and desktop. 5) Test total rejection and verify no analytics scripts load. 6) Use Lighthouse for Core Web Vitals impact.
Does FlowConsent work with Next.js App Router?
Yes. FlowConsent is compatible with Next.js App Router (Next.js 13+). Integrate it in your app/layout.tsx via the <Script> component from next/script with strategy="beforeInteractive". FlowConsent works as a native Client Component: it interacts with the browser DOM and requires no specific server-side logic. The fc:consent-update event can be listened to in your Client Components to react to user choices in real time.