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)
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import Script from "next/script";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
{/* CookieChimp script MUST load first */}
<Script
src="https://cookiechimp.com/widget/YOUR_SITE_ID.js"
strategy="beforeInteractive"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{/* Required container for privacy trigger */}
<div id="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";
export default function ConsentLogger() {
useEffect(() => {
function logConsent() {
// ✅ Service-level check
// @ts-ignore
const allowed = window.CookieConsent?.acceptedService?("Google Analytics", "analytics");
if (allowed) {
console.log("✅ Google Analytics allowed");
} else {
console.log("❌ Google Analytics blocked");
}
}
// Run now + on changes
logConsent();
window.addEventListener("cc:onConsented", logConsent);
window.addEventListener("cc:onUpdate", logConsent);
return () => {
window.removeEventListener("cc:onConsented", logConsent);
window.removeEventListener("cc:onUpdate", logConsent);
};
}, []);
return null;
}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";
import Image from "next/image";
import ConsentLogger from "./consent-logger";
export default function Home() {
return (
<div className="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 />
<main className="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.