This is a Next.js project bootstrapped with create-next-app and integrated with CookieChimp for GDPR-compliant cookie consent management.
This example demonstrates how to integrate CookieChimp with a Next.js application using the App Router. The implementation includes:
- CookieChimp Script: Loads with
beforeInteractivestrategy for proper consent management - Consent Logger: Real-time consent status checking and logging
- Event Listeners: Responds to user consent changes
- Service-level Control: Granular consent checking for specific services
Get your CookieChimp Site ID
- Sign up at CookieChimp
- Create a new site in your dashboard
- Copy your Site ID
- If running locally, add
localhostto Allowed Domains in your CookieChimp site settings
Add the script and container in
src/app/layout.tsx(open file)
importtype{Metadata}from"next";import{Geist,Geist_Mono}from"next/font/google";importScriptfrom"next/script";import"./globals.css";constgeistSans=Geist({variable: "--font-geist-sans",subsets: ["latin"],});constgeistMono=Geist_Mono({variable: "--font-geist-mono",subsets: ["latin"],});exportconstmetadata: Metadata={title: "Create Next App",description: "Generated by create next app",};exportdefaultfunctionRootLayout({
children,}: Readonly<{children: React.ReactNode;}>){return(<htmllang="en"><head>{/* CookieChimp script MUST load first */}<Scriptsrc="https://cookiechimp.com/widget/YOUR_SITE_ID.js"strategy="beforeInteractive"/></head><bodyclassName={`${geistSans.variable}${geistMono.variable} antialiased`}>{/* Required container for privacy trigger */}<divid="cookiechimp-container"/>{children}</body></html>);}Replace YOUR_SITE_ID with your actual Site ID from the CookieChimp dashboard.
- Add consent logger in
src/app/consent-logger.tsx(optional) (open file)
"use client";import{useEffect}from"react";exportdefaultfunctionConsentLogger(){useEffect(()=>{functionlogConsent(){// ✅ Service-level check// @ts-ignoreconstallowed=window.CookieConsent?.acceptedService?("Google Analytics","analytics");if(allowed){console.log("✅ Google Analytics allowed");}else{console.log("❌ Google Analytics blocked");}}// Run now + on changeslogConsent();window.addEventListener("cc:onConsented",logConsent);window.addEventListener("cc:onUpdate",logConsent);return()=>{window.removeEventListener("cc:onConsented",logConsent);window.removeEventListener("cc:onUpdate",logConsent);};},[]);returnnull;}Optionally, change the service and category strings to match your CookieChimp configuration.
- Use the logger on a page (
src/app/page.tsx) (open file)
"use client";importImagefrom"next/image";importConsentLoggerfrom"./consent-logger";exportdefaultfunctionHome(){return(<divclassName="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20"><ConsentLogger/><mainclassName="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">{/* ... existing content ... */}- Test the integration
- Run the development server (see below)
- Open browser DevTools → Console
- Interact with the banner (Accept / Deny / Update)
- You should see logs reflecting consent state
This setup follows the official guide: Next.js Integration Guide.
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
- Next.js GitHub repository - your feedback and contributions are welcome!
- CookieChimp Documentation - complete integration guide
- Next.js Integration Guide - specific Next.js setup instructions
- CookieChimp Dashboard - manage your cookie consent settings
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.