Next.js Quickstart

CLI Setup (Recommended)

npx @c15t/cli generate

npx @c15t/cli migrate

Manual Setup

npx @c15t/nextjs

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;

import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
} from '@c15t/nextjs';

export default function Layout ({ 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>
  );
};

Hosting Options

Creating a consent.io Instance (Recommended)

Instead of self-hosting your own c15t instance, you can use a consent.io instance. This is the recommended method as it is the easiest way to get started and requires little maintenance.

Alternative Hosting Options

For more advanced setup options, please refer to:

• Overview - Compare different approaches to storing consent decisions in your application
• Hosted c15t - Complete guide to using consent.io
• Self-Hosting - Run your own c15t instance
• Offline Mode - Complete guide to using c15t without a backend
• Custom Client - Advanced implementation with custom handlers for full control

Decision Guide

Use this flowchart to determine which c15t configuration is best for your needs:

Next Steps in This Guide