How do I add cookie consent to Next.js?

Install @consentstack/react and render the ConsentStack component with your site key in your root layout (App Router) or in _app (Pages Router). No extra configuration is needed for the banner and script blocking.

Does it work with the Next.js App Router?

Yes. The package supports both the App Router and the Pages Router. Add the component once near the root and it handles the banner, blocking, and geo-detection.

Will there be a consent flash on the first render?

No. Consent state is seeded from the edge, so hooks like useConsent resolve immediately on the landing page. Gate scripts on isReady && hasConsent(category) to avoid a flash.

Cookie Consent for Next.js | ConsentStack

In Next.js, third-party scripts can load before a client-side consent library runs, so a cookie-only banner leaks data on the first paint. ConsentStack's React package works in the App Router and Pages Router and blocks trackers until the user consents, covering GDPR, CCPA, and 70+ regulations.

Why ConsentStack on Next.js

Works with the App Router and Pages Router: render the component once in your root layout.
Blocks third-party scripts before they load instead of after the page paints.
Consent state is seeded from the edge, so useConsent gates resolve immediately without a flash.
Pixel-perfect brand matching, so the banner looks built into your Next.js site, never bolted on.

Install in Next.js

terminal

npm install @consentstack/react

app/layout.tsx

import { ConsentStack } from "@consentstack/react"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ConsentStack siteKey="YOUR_SITE_KEY" />
      </body>
    </html>
  )
}

Replace YOUR_SITE_KEY with the site key from your ConsentStack dashboard.

Add <ConsentStack /> in your root layout (App Router) or _app (Pages Router). Consent state is seeded from the edge, so gating passes immediately on the landing page.

React SDK docs Cookie consent for React Vendor and tracker library