Cookie Banner for Next.js
Next.js is the leading React framework, and adding cookie consent is straightforward with TinyConsent. Whether you're using the App Router or Pages Router, you can add cookie consent infrastructure with a single script tag — no npm packages or complex configuration required.
Get Your Next.js Code
No signup required to get started
Live Banner Preview
This is how the cookie banner will appear on your Next.js site.
My Next.js Site uses cookies to enhance your experience and analyze traffic. By clicking "Accept", you consent to our use of cookies.
Next.js Integration Code
Add this to: layout.tsx or _document.tsx
// App Router: app/layout.tsx
import Script from 'next/script';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
{/* TinyConsent - loads early to block trackers */}
<Script
src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID"
strategy="afterInteractive"
/>
</head>
<body>{children}</body>
</html>
);
}
// Pages Router: pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';
export default function Document() {
return (
<Html lang="en">
<Head>
<Script
src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID"
strategy="beforeInteractive"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Replace YOUR_SCRIPT_ID with your actual script ID from TinyConsent.
Why Next.js Sites Need a Cookie Banner
Next.js apps commonly use Vercel Analytics, Google Analytics, Segment, or other tracking tools. If you're deploying to production and have EU visitors, you need proper cookie consent. TinyConsent integrates seamlessly with Next.js's rendering model.
What TinyConsent Handles for Next.js
- Automatic blocking of tracking scripts until consent
- Technical consent collection with region detection
- Google Consent Mode v2 integration
- Consent storage and audit logging
- Customizable design to match your site
How to Add a Cookie Banner to Next.js
Generate your script
Get your unique TinyConsent script ID from tinyconsent.com.
Choose your router
Identify if you're using App Router (app/) or Pages Router (pages/).
Add to layout/document
Add the Script component to your root layout or _document file.
Use Next.js Script component
Import next/script for optimal loading with strategy="afterInteractive".
Deploy and test
Deploy your changes and test the banner in production.
Configure consent categories
Use your dashboard to set up which scripts require which consent.
Next.js Tips
- •Works with both App Router and Pages Router
- •Compatible with Vercel, Netlify, and self-hosted deployments
- •Use strategy="beforeInteractive" for earliest loading in Pages Router
- •No hydration mismatches — script loads independently of React
Why TinyConsent for Next.js
60-Second Setup
No npm packages, no build configuration. Just one script tag and you're compliant.
Lightweight
Under 5KB initial load. Zero impact on your Next.js bundle size.
Technical Infrastructure
Script blocking, consent logging, and region detection. Technical foundation for consent workflows.
Developer-Friendly
JavaScript API for checking consent status. Perfect for conditional script loading.
Frequently Asked Questions
Should I use an npm package instead?
TinyConsent's script approach is simpler and avoids bundle size increases. You don't need react-cookie-consent or similar packages.
Does this work with Server Components?
Yes. The Script component works in Server Components. TinyConsent runs client-side but doesn't require "use client" in your layout.
Will it cause hydration errors?
No. TinyConsent operates independently of React's hydration. It injects its own DOM elements after your app hydrates.
How do I check consent in my code?
TinyConsent exposes a JavaScript API: window.TinyConsent.hasConsent("analytics"). Use this for conditional script loading.
Does it work with next/analytics?
Yes. TinyConsent integrates with Vercel Analytics and can conditionally enable it based on consent status.
What about middleware for geo-detection?
TinyConsent handles geo-detection server-side. You don't need Next.js middleware for showing different banners to different regions.