c15t
/
C15T Logo
Select a framework
Frameworks
Welcome to c15t Docs
Introduction to Consent Management (c15t)
AI Tools Integrations
OSS
Contributing to c15t.com
License
Building Privacy Tools in the Open
Legal
Cookie Policy
Privacy Policy
C15T Logo
HomeFrontendIntegrationsSelf HostChangelog
xbskydiscordgithub1.4k
c15t
/
C15T Logo
Select a framework
Frameworks
Welcome to c15t Docs
Introduction to Consent Management (c15t)
AI Tools Integrations
OSS
Contributing to c15t.com
License
Building Privacy Tools in the Open
Legal
Cookie Policy
Privacy Policy
home-2Docs
chevron-rightFrameworks
chevron-rightNext
chevron-rightQuickstart

Quickstart

Integrate c15t into your Next.js application with this step-by-step guide. We'll cover installation, configuration, and basic usage.

CLI Setup (Recommended)

You can get started with the @c15t/cli which will generate the code for you!

npx @c15t/cli generate

Manual Setup

Install @c15t/nextjs Package

npm install @c15t/nextjs

Next.js Rewrites (Optional)

Info

You can use Next.js Rewrites to redirect requests to the c15t backend. This is useful if you want to hide the c15t backend url from your users. Learn more about Next.js Rewrites.

next.config.ts
import type { NextConfig } from 'next';

const config: NextConfig = {
	async rewrites() {
		return [
			{
				source: '/api/c15t/:path*',
				destination: `${process.env.NEXT_PUBLIC_C15T_URL}/:path*`,
			},
		];
	},
};

export default config;

Adding it to your Next Application

Info

If you're using Next.js Rewrites, you can use the backendURL option to redirect requests to the c15t backend by setting it to /api/c15t.

app/consent-manager.tsx
import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
} from '@c15t/nextjs';
import type { ReactNode } from 'react';

export default function ConsentManager({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
        consentCategories: ['necessary', 'marketing'], // Optional: Specify which consent categories to show in the banner.
        ignoreGeoLocation: true, // Useful for development to always view the banner.
      }}
    >
      <CookieBanner />
      <ConsentManagerDialog />   
      {children}
    </ConsentManagerProvider>
  );
};

In your app/layout.tsx file, you can import the ConsentManager component.

app/layout.tsx
import { ConsentManager } from './consent-manager';

export default function Layout({ children }: { children: ReactNode }) {
  return <ConsentManager>{children}</ConsentManager>;
}

Some options such as scripts & callbacks cannot be seralized and sent to the client from the server. For a guide on how to add these when using the App Directory, see the ClientSideOptionsProvider documentation.

Storing Consent

We recommend using the hosted solution with consent.io to store your consent.

Available in other SDKs

javascriptJavaScriptreactReact
C15T Logo
Leverage native React components for seamless integration and high performance in a robust Consent Management solution that empowers your development team while prioritizing privacy and compliance.
Product
  • Documentation
  • Components
Company
  • GitHub
  • Contact
Legal
  • Privacy Policy
  • Cookie Policy
c15t