How to add a cookie banner on a Next.js website

This guide shows you how to add the Kukie.io cookie consent banner to your Next.js application. Next.js provides a built-in Script component that gives you fine-grained control over script loading.

Prerequisite: You need a Kukie.io account and at least one site added. If you haven't done this yet, follow Create Your Account & Add Your First Site first.

Step 1: Get Your Embed Code

Log in to your Kukie.io dashboard, navigate to your site, and copy the embed code from the Setup tab. It looks like this:

<script src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js" async></script>

Replace YOUR-SITE-KEY with the actual site key shown in your dashboard.

Step 2: Add the Script to Next.js

App Router (Next.js 13+, Recommended)

Open your root layout file app/layout.tsx (or app/layout.js) and add the Next.js Script component:

import Script from 'next/script'

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <head>
                <Script
                    src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js"
                    strategy="beforeInteractive"
                />
            </head>
            <body>{children}</body>
        </html>
    )
}

Why beforeInteractive? This strategy loads the script before any client-side JavaScript runs, ensuring the consent banner appears before analytics or advertising scripts fire. This is critical for GDPR compliance.

Pages Router (Legacy)

If you use the Pages Router, add the script in pages/_app.tsx:

import Script from 'next/script'

function MyApp({ Component, pageProps }) {
    return (
        <>
            <Script
                src="https://cdn.kukie.io/s/YOUR-SITE-KEY/c.js"
                strategy="beforeInteractive"
            />
            <Component {...pageProps} />
        </>
    )
}

Step 3: Verify the Installation

Visit your website in a new browser window (or incognito/private mode). You should see the Kukie.io consent banner appear. If it does not show, check the following:

• Open your browser's Developer Tools (F12) and look for the script in the Network tab - it should load with a 200 status
• Check the Console tab for any JavaScript errors
• Make sure you published/saved your changes in your Next.js app
• Clear any platform-level cache if applicable

For a detailed verification walkthrough, see How to Verify Your Banner Installation.

Next Steps

• Run Your First Cookie Scan to discover all cookies on your site
• Customise Your Banner Design to match your brand
• Set Up Region Rules to comply with GDPR, CCPA, and other regulations
• Enable Google Consent Mode v2 if you use Google Analytics or Google Ads

Need help? If you run into any issues, contact our support team and we'll help you get set up.