For developers → DocsSlovensky

DEVELOPER GUIDES

Cookie consent for Next.js

In Next.js the script must load before hydration — otherwise marketing scripts fire before blocking kicks in.

App Router — app/layout.tsx
import Script from 'next/script'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <head> <Script id="CookieFood" src="https://cookiefood.b-cdn.net/v1/consent.js" data-cfid="YOUR-ID" data-blockingmode="auto" strategy="beforeInteractive" /> </head> <body>{children}</body> </html> ); }
Pages Router — pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( <Html lang="en"> <Head> <script id="CookieFood" src="https://cookiefood.b-cdn.net/v1/consent.js" data-cfid="YOUR-ID" data-blockingmode="auto" /> </Head> <body><Main /><NextScript /></body> </Html> ); }

What to watch out for

strategy="beforeInteractive" is required

With afterInteractive third-party scripts run before blocking applies.

Do not inject it from useEffect

That runs after render — too late for blocking.

Leave Analytics and Pixel as they are

CookieFood holds them back itself. No need to wrap them in conditions.

Where to get your YOUR-ID

Sign up, add a domain and you get the ID right away — the scan starts by itself. The snippet never changes again; everything else is configured in your account.

Try free for 30 daysScan your site firstNo credit card.

Other environments

React / ViteWordPressShopifyGoogle Tag Managerllms.txt