nextjs-cookie-consent

v2.0.0

Published

7 months ago

A GDPR/DSGVO-compliant cookie consent banner for Next.js

0High
0Medium
0Low

luck2y

nextjs cookie consent gdpr dsgvo privacy react typescript

🍪 nextjs-cookie-consent

A 🛡️ GDPR / DSGVO-compliant cookie consent banner for Next.js with fully customizable categories like analytics, marketing, or preferences. Built for modern apps with easy styling, flexible API, and localStorage- or cookie-based consent handling.

✨ Features

✅ GDPR / DSGVO-compliant: Only essential cookies are enabled by default
🧠 Fully configurable categories (e.g. Necessary, Analytics, Marketing, ...)
💬 Custom text with links to your privacy policy
💾 Consent stored in localStorage (or cookies – configurable!)
🔄 Dynamic access to user consent via useConsent() hook
🧱 Compatible with both App Router and Pages Router
🎨 Minimal styling (fully customizable)

🚀 Installation

npm install nextjs-cookie-consent

or with Yarn:

yarn add nextjs-cookie-consent

⚙️ Usage

App Router (app/layout.tsx):

import { ConsentProvider, CookieBanner } from 'nextjs-cookie-consent';
import 'nextjs-cookie-consent/dist/styles/styles.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ConsentProvider>
      <html lang="en">
        <body>
          {children}
          <CookieBanner
            categories={[
              { key: 'analytics', label: 'Analytics' },
              { key: 'marketing', label: 'Marketing' },
            ]}
            storageStrategy="localStorage" // optional: "cookie" or "localStorage" (default)
            content={
              <p>
                We use cookies to improve your experience.{' '}
                <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">
                  Learn more
                </a>
                .
              </p>
            }
          />
        </body>
      </html>
    </ConsentProvider>
  );
}

Pages Router (_app.tsx):

import { ConsentProvider, CookieBanner } from 'nextjs-cookie-consent';
import 'nextjs-cookie-consent/dist/styles/styles.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ConsentProvider>
      <Component {...pageProps} />
      <CookieBanner
        categories={[
          { key: 'analytics', label: 'Analytics' },
          { key: 'marketing', label: 'Marketing' },
        ]}
      />
    </ConsentProvider>
  );
}

📊 Accessing Consent State

Use the useConsent() hook anywhere in your app:

'use client';

import { useConsent } from 'nextjs-cookie-consent';

export default function AnalyticsLoader() {
  const { consent } = useConsent(['analytics', 'marketing']);

  return (
    <>
      {consent.analytics && <p>📈 Analytics enabled</p>}
      {!consent.analytics && <p>❌ Analytics disabled</p>}
    </>
  );
}

🧪 Example: Load Google Analytics only after consent

'use client';

import Script from 'next/script';
import { useConsent } from 'nextjs-cookie-consent';

export default function GoogleAnalytics() {
  const { consent } = useConsent(['analytics']);

  if (!consent.analytics) return null;

  return (
    <>
      <Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX" strategy="afterInteractive" />
      <Script id="ga-init" strategy="afterInteractive">
        {`window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXX');`}
      </Script>
    </>
  );
}

🧰 Props & API

| Prop | Type | Description | |------|------|-------------| | categories | CookieCategory[] | An array of consent categories to configure | | content | React.ReactNode | (optional) Custom JSX/HTML content shown above the buttons | | storageStrategy | 'localStorage' \| 'cookie' | (optional) Where to store consent. Default: 'localStorage' |

interface CookieCategory {
  key: string;   // e.g. "analytics"
  label: string; // e.g. "Analytics"
}

🎨 Custom Styling

Import the CSS file and override the classes:

import 'nextjs-cookie-consent/dist/styles/styles.css';

Available CSS classes:

.njs-cookie-banner-container - Whole Banner
.njs-cookie-banner-default - Default Banner view
.njs-cookie-banner-settings - Settings Banner view
.njs-cookie-banner-buttons - Button group
.njs-cookie-banner-button-necessary - "Only necessary" button
.njs-cookie-banner-button-accept-all - "Accept all" button
.njs-cookie-banner-button-settings - "Settings" button
And many more...

⚖️ License

MIT – free to use for personal and commercial projects.

Built with ❤️ for modern Next.js apps.