@c15t/nextjs

v2.2.1

Published

16 days ago

Next.js cookie banner and consent management platform for App Router, Pages Router, SSR, IAB TCF, and Consent Mode.

@c15t/nextjs: Next.js Integration

Next.js cookie banner and consent management platform for App Router, Pages Router, SSR, and headless consent flows.

Key Features

Works with Next.js 16, 15, 14, and 13
Full 'use client' support for React Server Components
Server-side rendering support for both app and pages routers
Prebuilt and customizable cookie banner, consent dialog, and preference center UI
Headless hooks for custom consent flows
Minimal configuration with TypeScript-first design
IAB TCF 2.3 UI and hooks through the @c15t/react/iab subpath
Google Tag Manager, Google Consent Mode v2, Meta Pixel, and analytics integrations through @c15t/scripts
Built-in internationalization support
Seamless consent storage and tracking

Prerequisites

Next.js 13.5.4 or later
React 18 or later
Node.js 18.17.0 or later
A hosted c15t instance (free sign-up), self-hosted deployment, or offline mode for local-only storage

Quick Start

Easiest setup with @c15t/cli:

# Set up c15t in your project
pnpm dlx @c15t/cli setup
# Alternatives:
# npx @c15t/cli setup
# bunx --bun @c15t/cli setup

The CLI will:

Install necessary packages
Configure your c15t instance
Set up environment variables
Add consent management components to your app

Manual Installation

pnpm add @c15t/nextjs

Then add the prebuilt stylesheet to your app-level CSS entrypoint:

/* app/globals.css */
@import "@c15t/nextjs/styles.css";

To manually install, follow the guide in our docs – manual setup.

Usage

Import ConsentManagerProvider in your app's root layout
Add ConsentBanner and ConsentDialog components
Customize styling and behavior to fit your app
For full implementation details, see the Next.js quickstart docs

// app/layout.tsx
import {
  ConsentManagerProvider,
  ConsentBanner,
  ConsentDialog,
} from '@c15t/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ConsentManagerProvider>
          {children}
          <ConsentBanner />
          <ConsentDialog />
        </ConsentManagerProvider>
      </body>
    </html>
  )
}

Documentation

For further information, guides, and examples visit the reference documentation.

Deployment Modes

Hosted on inth.com: Hosted c15t backend for policy storage, audit history, and hosted infrastructure
Self-hosted backend: Use @c15t/backend with your own database and infrastructure
Offline mode: Browser-only consent storage for local development, demos, previews, static sites, or fallback scenarios

Popular Integrations

Google Tag Manager with Google Consent Mode v2
Google Analytics 4 and Google Ads through gtag.js
Meta Pixel, TikTok Pixel, LinkedIn Insights, Microsoft UET, X Pixel, Reddit Pixel, and Snapchat Pixel
PostHog, Segment, Mixpanel, Microsoft Clarity, Hotjar, Plausible, Fathom, Matomo, Umami, and Vercel Analytics
Intercom and Crisp chat widgets

Support

Join our Discord community
Open an issue on our GitHub repository
Visit inth.com and use the chat widget
Contact our support team via email [email protected]

Contributing

We're open to all community contributions.
Read our Contribution Guidelines
Review our Code of Conduct
Fork the repository
Create a new branch for your feature
Submit a pull request
All contributions, big or small, are welcome and appreciated.

Security

If you believe you have found a security vulnerability in c15t, we encourage you to responsibly disclose this and NOT open a public issue. We will investigate all legitimate reports.

Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our open-source software. To do this, please visit https://github.com/c15t/c15t/security and click the "Report a vulnerability" button.

Security Policy

Please do not share security vulnerabilities in public forums, issues, or pull requests
Provide detailed information about the potential vulnerability
Allow reasonable time for us to address the issue before any public disclosure
We are committed to addressing security concerns promptly and transparently

License

Apache License 2.0

Built by Inth