Next.js Quickstart

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

CLI Setup (Recommended)

Generate Schema + Code

npx @c15t/cli generate

Run Database Migrations (Optional)

This is only required if you are self hosting c15t.

npx @c15t/cli migrate

Manual Setup

Install `@c15t/nextjs` Package

npm install @c15t/nextjs

Next.js Rewrites (Optional)

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

app/layout.tsx

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>
  );
};

You can create an instance at consent.io or self-host your own instance. Otherwise, you can use c15t offline by setting mode: 'offline'.

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.

Hosting Options

Creating a consent.io Instance (Recommended)

Using consent.io is the recommended method as it is the easiest way to get started and requires little maintenance.

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.

After signing up, create a new instance, located in the top-right corner.

When creating an instance it is important to list all the trusted origins for your application such as "localhost", "vercel.app", "c15t.com" etc.

After the instance is created, you will be given a backendURL, which you can add to your ConsentManagerOptions.

A backend URL might look like this: https://<my-instance>.c15t.dev/.

Alternative Hosting Options

For more advanced setup options, choose the approach that best suits your infrastructure and requirements.

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.

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

Next Steps in This Guide

Choose your next step based on your specific implementation needs.

Learn more about Client Configuration Options

Learn more about Hosted c15t

Learn more about Self-Hosting

Learn more about Offline Mode

Learn more about Custom Client

Next.js Quickstart

On this page