Next.js and GDPR cookies: the compliance guide

TL;DR

A Next.js site that integrates Google Analytics, the Meta Pixel, or any other tracking tool must collect visitor consent before activating those scripts, as required by GDPR. Displaying a banner alone is not enough: you must block third-party scripts until the user explicitly agrees, store proof of that consent, and implement Google Consent Mode v2 signals. This guide explains how to do that correctly in a Next.js application.

Why cookie compliance matters for a Next.js app

Next.js is a React framework widely used for modern websites and applications, often deployed on platforms like Vercel or Netlify. Its flexibility makes it popular for e-commerce sites, SaaS products, and editorial platforms.

That same flexibility means developers routinely integrate dozens of third-party scripts: Google Analytics 4, Google Tag Manager, Meta Pixel, Hotjar, Intercom, and more. Each of these tools sets cookies that require prior user consent under GDPR and the UK GDPR.

The most common risk is loading these scripts inside _app.tsx or a Layout component with no consent check at all. This pattern is extremely widespread and constitutes a clear GDPR violation.

What GDPR requires for cookies in a Next.js app

GDPR (together with the ePrivacy Directive) sets three core obligations for non-essential cookies: inform users clearly, collect their consent before activating trackers, and allow them to withdraw that consent as easily as they gave it.

Which cookies require consent in Next.js?

The vast majority of third-party tools integrated into a Next.js app require consent. The main categories:

• Analytics: Google Analytics 4, standard Plausible, standard Matomo
• Advertising and marketing: Meta Pixel, LinkedIn Insight Tag, Google Ads, TikTok Pixel
• User experience: Hotjar, FullStory, LogRocket, Microsoft Clarity
• Support and chat: Intercom, Drift, HubSpot Chat

Strictly necessary cookies for the application to function (session, authentication, shopping cart) are exempt from consent requirements.

The 3 core GDPR obligations

1. Inform: describe clearly which cookies are used, why, and by whom, before any are set.
2. Collect consent: obtain consent that is freely given, specific, informed, and unambiguous. No pre-ticked boxes, no implied consent through scrolling.
3. Respect the choice: do not load rejected scripts, allow withdrawal at any time, and renew consent periodically (ICO recommends reviewing whether consent is still valid at regular intervals).

How to implement a GDPR-compliant cookie banner in Next.js

There are two main approaches to managing consent in a Next.js application: using a dedicated CMP (Consent Management Platform) or building the solution yourself.

Option 1: use a CMP (recommended approach)

A CMP like FlowConsent automatically handles banner display, consent collection, third-party script blocking, and Consent Mode v2 signal dispatch. Integration in Next.js is done via a script injected into the Head component or via the Next.js Script component with the beforeInteractive strategy.

The main advantage: the CMP handles all consent logic, storage, translations, and regulatory updates. You do not need to maintain this logic yourself.

Option 2: build it yourself

Building your own consent banner in Next.js is technically feasible using a React component and a global Context or store. However, the limitations are significant:

• You must implement script blocking, Consent Mode v2 signals, secure consent storage, and renewal logic yourself.
• Every regulatory update (ICO, EDPB) requires a technical intervention.
• Proof of consent (timestamp, banner version, user choice per category) must be reliably stored.

Blocking scripts until consent is given

The core pattern in Next.js is to condition the loading of third-party scripts on the consent state. When using the Next.js Script component, the afterInteractive strategy must be gated by a consent check in the application state.

Without this condition, GTM or GA4 loads at page startup, before the banner even appears. This is the single most common GDPR violation in Next.js applications.

Google Consent Mode v2 and Next.js

Google Consent Mode v2 has been required since March 2024 for advertisers using Google Ads or GA4 with remarketing. It allows you to send consent state signals to Google (analytics_storage, ad_storage, ad_user_data, ad_personalization) even when a user declines cookies.

In Next.js, implementation can be done via Google Tag Manager (recommended for sites without a dedicated technical team) or via a direct gtag.js integration. In both cases, consent signals must be sent before any Google tags are initialised.

Our complete Google Consent Mode v2 guide covers the technical implementation step by step, including GTM configurations adapted for modern JavaScript applications.

Common mistakes in Next.js cookie compliance

Next.js cookie compliance checklist

1. Audit all third-party scripts loaded in the application (Next.js Script component, GTM, direct imports).
2. Categorise every cookie: strictly necessary, functional, analytics, marketing.
3. Integrate a CMP or consent component that blocks non-essential scripts by default.
4. Verify that third-party scripts (GA4, GTM, Meta Pixel) only load after explicit consent.
5. Implement Google Consent Mode v2 signals (analytics_storage, ad_storage, ad_user_data, ad_personalization).
6. Store consent securely with a timestamp, banner version, and per-category choice.
7. Set up automatic consent renewal.
8. Add a preference modification link accessible from all pages.
9. Test the banner in private browsing and confirm no non-essential cookies are set before consent.
10. Run a regular cookie audit with a dedicated tool.

To check which cookies your site currently sets, our complete cookie audit guide covers the full method.

Conclusion

GDPR compliance in a Next.js application comes down to one principle: no non-essential script should run before user consent. Next.js makes it easy to integrate trackers, but that same flexibility demands constant vigilance over what loads and when.

The most reliable solution is to use a dedicated CMP that automatically handles script blocking, Consent Mode v2 signals, and proof of consent. Start by scanning your Next.js site on FlowConsent to identify exactly which trackers require action.