Documentation last updated June 2, 2026
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 same `plain-html` adapter files shipped in `cookiezy-platform-core.zip`, but integrates them through a Next-specific root layout pattern and relies on registered hostnames for full runtime mode.
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.
What the Next.js package includes
After account access is active you download `cookiezy-platform-core.zip`. For Next.js you use the same `plain-html` adapter files from `packages/adapters/plain-html/` and the shared core assets from `packages/core/dist/`. The canonical adapter entry file is `cookiezy-plain-adapter.js`.
- • `packages/adapters/plain-html/cookiezy-plain-adapter.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
Copy the canonical adapter files into the Next.js public folder
Extract `cookiezy-platform-core.zip` and place `cookiezy-plain-adapter.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/cookiezy-plain-adapter.js
public/cookie-consent.js
public/cookie-consent-ui.js
public/cookie-consent-scanner.js
public/cookie-consent.cssLoad and boot Cookiezy from app/layout.tsx
Add the CSS and scripts to your root layout, then boot the plain adapter with the locale, policy route, and issued licensing values you want to use. This keeps the consent layer available on every App Router page. Important: boot the adapter before loading `cookie-consent.js`, because the core runtime verifies the license immediately on load. If `license.siteKey` or `license.verifyUrl` are missing, or if the core script runs before `CookiezyPlainAdapter.boot(...)`, the runtime will stay in restricted mode with `license_not_configured`.
Code snippet
<link rel="stylesheet" href="/cookie-consent.css" />
<script src="/cookiezy-plain-adapter.js"></script>
<script>
window.CookiezyPlainAdapter.boot({
locale: "en",
storageKey: "cookiezy_next_v1",
policyUrl: "/en/cookie-policy",
theme: { layout: "bottom-right", themeClass: "" },
license: {
siteKey: "ck_live_replace_me",
verifyUrl: "https://cookiezy.com/api/licensing/verify",
billingUrl: "https://cookiezy.com/en/billing"
},
texts: {}
});
</script>
<script src="/cookie-consent.js"></script>
<script src="/cookie-consent-ui.js"></script>
<script src="/cookie-consent-scanner.js"></script>Register the live hostname, settings link, and policy audit
Register every live hostname in Cookiezy billing before publish so runtime verification can return `allowed: true`. 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();
}Add a live cookie audit to your Next.js policy page
Cookiezy can scan the current browser session on the implemented site and display detected cookies with category, provider, purpose or description, and duration. In Next.js, mount the audit only on the policy route so the page can show what changed after a visitor accepts, rejects, or updates consent.
Live cookie scan for this browser session
This audit reads the cookies currently visible on the domain in your browser and maps known cookies to categories and purposes. Re-scan after changing consent to verify what stays active.
How Cookiezy handles cookies on this site
Necessary cookies stay active so the site, login flow, and consent preferences keep working. Optional categories can be enabled or disabled by the visitor through Cookiezy settings.
This scan reflects the current browser session and the current state of consent on this device.
Cookie categories used on the site
Necessary
Required for security, routing, authentication, and storing the consent choice itself.
Analytics
Used to understand traffic and site usage when the visitor has granted analytics consent.
Marketing
Reserved for advertising, retargeting, and campaign tracking when marketing consent is granted.
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.
Next.js cookie consent FAQ
Helpful answers for teams evaluating consent management in Next.js.
Which ZIP should I use for Next.js?
Use `cookiezy-platform-core.zip` and integrate the `plain-html` 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, and make sure `CookiezyPlainAdapter.boot(...)` runs before `cookie-consent.js`.
What is the difference between Next.js and headless here?
Next.js is the framework-specific integration path. Headless describes a more generic custom frontend architecture. Both currently use the same base `plain-html` adapter files, but Next.js should follow the root layout and route-aware setup shown in the Next.js guide.
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.
What happens if billing is inactive or the hostname is not registered?
The Next.js runtime should fall back to necessary-only restricted mode. Optional analytics, marketing, and premium runtime behavior remain blocked until the account is active and the hostname is allowed.