nextjs-cookie-consent
Version:
A GDPR/DSGVO-compliant cookie consent banner for Next.js
172 lines (135 loc) • 4.74 kB
Markdown
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.
✅ **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
```bash
npm install nextjs-cookie-consent
```
or with Yarn:
```bash
yarn add nextjs-cookie-consent
```
## ⚙️ Usage
### App Router (app/layout.tsx):
```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>
);
}
```
```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>
);
}
```
Use the `useConsent()` hook anywhere in your app:
```tsx
'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>}
</>
);
}
```
```tsx
'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>
</>
);
}
```
| 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'` |
```tsx
interface CookieCategory {
key: string; // e.g. "analytics"
label: string; // e.g. "Analytics"
}
```
Import the CSS file and override the classes:
```tsx
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...
MIT – free to use for personal and commercial projects.
Built with ❤️ for modern Next.js apps.