C15T Logo

Quickstart

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

tocOn this page

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

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

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

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.

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