Cookie consent for Next.js,
in one command

A Next.js app has no consent layer. next/script loads GA4 or the Meta pixel the moment the page hydrates, and every visitor from the EU is tracked before they have said anything.

The rule is the same everywhere in the EU and the UK: nothing beyond what is strictly necessary may be stored on or read from a visitor’s device before they have agreed. That is Article 5(3) of the ePrivacy Directive, and the agreement has to meet the GDPR’s definition of consent: freely given, specific, informed and unambiguous, with a refusal that is as easy as the acceptance. The UK keeps the same rule in PECR, with narrow exemptions for low-risk statistics since 5 February 2026. California and the other US state laws work the other way round: no opt-in, but an opt-out link and support for the Global Privacy Control signal.

Three things follow for a website. Analytics, advertising and social scripts have to wait for a choice. The choice has to be recorded in a way you can show later, because Article 7(1) puts the burden of proof on you. And withdrawing has to be as easy as agreeing, which means a control that reopens the banner on every page. A banner that shows two buttons and loads Google Analytics anyway fails the first test, and that is the failure regulators have been fining, from the CNIL’s decisions against Google and SHEIN to the Dutch and Belgian authorities’ sweeps.

Next.js gives you exactly one good place for a consent runtime: a next/script tag with strategy="beforeInteractive". Scripts with that strategy are injected into the initial HTML and run before any hydration, which is the only moment early enough. afterInteractive (the default) runs after hydration, by which time a tag manager added with the same strategy may already have fired. lazyOnload is worse still.

In the App Router the tag goes into app/layout.tsx, which wraps every route. In the Pages Router it goes into pages/_document.tsx. The CLI detects which one you use and prints the right snippet; @cookiecrumbs/next wraps the tag as a component and adds server helpers, so a Server Component or a route handler can read the consent cookie and decide what to render before the client runs.

From there, gating is a matter of category. A third-party tag becomes type="text/plain" with data-cc-category; a React subtree that loads a tracker goes inside ConsentGate. The runtime releases both when the category is granted, in document order, so a GTM container that waits for analytics runs exactly as it would have, just later. Everything the scan found on your production domain is compiled into a block map at publish, so untagged scripts whose host is known are neutralised in place as well.

Next.js sites often carry Google Ads or GA4 through GTM, added with afterInteractive. With the consent runtime first, those tags load with the right defaults and no code change on your side.

Google Consent Mode v2 is the signalling layer between the banner and Google’s tags. Before any tag runs, seven signals (ad_storage, analytics_storage, ad_user_data, ad_personalization, functionality_storage, personalization_storage, security_storage) are set to denied for visitors in the EEA, the UK and Switzerland. The moment someone chooses, the runtime updates them and Google’s tags adjust. Since 15 June 2026, Google uses ad_storage as the controlling signal for Ads data, so getting the default right matters more than it used to.

CookieCrumbs sets the defaults synchronously, ahead of any tag manager, updates them on every decision, and ships a Google Tag Manager template so the consent triggers exist without hand-written listeners. In advanced mode, Google’s cookieless pings keep modelled conversions working for the visitors who said no. What it does not do is pretend to be a Google-certified CMP: for AdSense, Ad Manager or AdMob in the EEA you still need one with IAB TCF, and CookieCrumbs is not that today.