Platform page

Cookie Consent for Next.js

Cookiezy gives Next.js teams a modern consent layer that fits App Router builds, server-rendered pages, and localized marketing sites. The packaged Next.js flow uses the plain-headless adapter files from `platform-cookie-core.zip` and loads them globally from the root layout.

Built for Next.js teams that care about performance, consent state, and implementation quality.

Cookie banner preview

Lightweight. Fast. Clear by default.

Cookie consent. Done easy.

Lightweight consent that keeps your site fast and your data intact.

Necessary

Analytics

Marketing

After purchase

What the Next.js package includes

After payment you download `platform-cookie-core.zip`. For Next.js you use the plain adapter files from `packages/adapters/plain-html/` and the shared core assets from `packages/core/dist/`.

• `packages/adapters/plain-html/headless-bootstrap.js`
• `packages/core/dist/cookie-consent.js`
• `packages/core/dist/cookie-consent-ui.js`
• `packages/core/dist/cookie-consent-scanner.js`
• `packages/core/dist/cookie-consent.css`
• `packages/adapters/plain-html/example.html` as the reference integration pattern

Cookiezy Next.js setup screenshot showing root layout bootstrap, verify URL, and policy audit wiring. — Reference view: Next.js rollout loads the plain adapter from the root layout and validates each live hostname.

Step 1

Copy the adapter files into the Next.js public folder

Extract `platform-cookie-core.zip` and place `headless-bootstrap.js` plus the shared core files into `public/` so they can be loaded from the root layout across all routes and locales.

Code snippet

public/headless-bootstrap.js
public/cookie-consent.js
public/cookie-consent-ui.js
public/cookie-consent-scanner.js
public/cookie-consent.css

Step 2

Load and boot Cookiezy from app/layout.tsx

Add the CSS and scripts to your root layout, then boot the plain adapter with the locale and policy route you want to use. This keeps the consent layer available on every App Router page.

Code snippet

<link rel="stylesheet" href="/cookie-consent.css" />
<script src="/headless-bootstrap.js"></script>
<script src="/cookie-consent.js"></script>
<script>
  window.CookiezyPlainAdapter.boot({
    locale: "en",
    storageKey: "cookiezy_next_v1",
    policyUrl: "/en/cookie-policy",
    theme: { layout: "bottom-right", themeClass: "" },
    texts: {}
  });
</script>
<script src="/cookie-consent-ui.js"></script>
<script src="/cookie-consent-scanner.js"></script>

Step 3

Register the settings link and mount the policy audit

After the scripts load, register the footer settings link and mount the cookie audit on the policy page. Then test homepage, pricing, and at least one localized route in a clean session.

Code snippet

window.CookiezyPlainAdapter.registerSettingsLink(document);

if (window.location.pathname === '/en/cookie-policy') {
  window.CookiezyPlainAdapter.mountAudit(document);
}

const consent = window.Cookiezy?.getConsent();
if (consent?.analytics) {
  startAnalytics();
}

Features

Consent features for modern Next.js websites

A better fit for teams using App Router, localized routes, and performance-sensitive pages.

App Router friendly

A practical consent layer for modern Next.js structures and route-driven experiences.

Localized route support

Works well with locale-based URL structures and policy page routing.

Policy page audit

Mount the cookie audit on the policy page using the same plain adapter helpers used by custom frontends.

Lightweight runtime

A stronger fit for performance-conscious sites than heavier banner tooling.

Ready to roll out

Use Cookiezy on your Next.js site

Add a consent layer that feels aligned with the way modern Next.js products are actually built.

FAQ

Next.js cookie consent FAQ

Helpful answers for teams evaluating consent management in Next.js.

Which ZIP should I use for Next.js?

Use `platform-cookie-core.zip` and integrate the plain adapter files from `packages/adapters/plain-html/` together with the shared core files in `packages/core/dist/`.

Where should I load Cookiezy in Next.js?

Load it from the root app layout so the consent layer is available across all routes and locales.

Can Cookiezy support localized Next.js sites?

Yes. It fits locale-based routing well, including cases where policy pages differ by language.

How do I show the cookie audit on the policy page?

Call `window.CookiezyPlainAdapter.mountAudit(document)` on the policy route after the scanner script is loaded.

<link rel="stylesheet" href="/cookie-consent.css" /> <script src="/headless-bootstrap.js"></script> <script src="/cookie-consent.js"></script> <script> window.CookiezyPlainAdapter.boot({ locale: "en", storageKey: "cookiezy_next_v1", policyUrl: "/en/cookie-policy", theme: { layout: "bottom-right", themeClass: "" }, texts: {} }); </script> <script src="/cookie-consent-ui.js"></script> <script src="/cookie-consent-scanner.js"></script>

window.CookiezyPlainAdapter.registerSettingsLink(document); if (window.location.pathname === '/en/cookie-policy') { window.CookiezyPlainAdapter.mountAudit(document); } const consent = window.Cookiezy?.getConsent(); if (consent?.analytics) { startAnalytics(); }