Quickstart (Pages Directory)

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

pages/_app.tsx

import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
} from '@c15t/nextjs/pages';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ConsentManagerProvider
      initialData={pageProps.initialC15TData}
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
        consentCategories: ['necessary', 'marketing'],
        ignoreGeoLocation: true,
      }}
    >
      <CookieBanner />
      <ConsentManagerDialog />
      <Component {...pageProps} />
    </ConsentManagerProvider>
  );
}

In every page you want to pre-fetch the data server-side, you can use the withInitialC15TData helper. Otherwise, it will be fetched client-side.

pages/index.tsx

import { withInitialC15TData } from '@c15t/nextjs/pages';

// This helper accepts a 2nd argument to wrap around your getServerSideProps existing function.
export const getServerSideProps = withInitialC15TData('/api/c15t');

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.

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

pages/_app.tsx

import { 
  ConsentManagerDialog,
  ConsentManagerProvider,
  CookieBanner,
} from '@c15t/nextjs/pages';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ConsentManagerProvider
      initialData={pageProps.initialC15TData}
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
        consentCategories: ['necessary', 'marketing'],
        ignoreGeoLocation: true,
      }}
    >
      <CookieBanner />
      <ConsentManagerDialog />
      <Component {...pageProps} />
    </ConsentManagerProvider>
  );
}

In every page you want to pre-fetch the data server-side, you can use the withInitialC15TData helper. Otherwise, it will be fetched client-side.

pages/index.tsx

import { withInitialC15TData } from '@c15t/nextjs/pages';

// This helper accepts a 2nd argument to wrap around your getServerSideProps existing function.
export const getServerSideProps = withInitialC15TData('/api/c15t');

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.

Quickstart (Pages Directory)

CLI Setup (Recommended)

Manual Setup

Install @c15t/nextjs Package

Next.js Rewrites (Optional)

Adding it to your Next Application

Storing Consent

Quickstart (Pages Directory)

CLI Setup (Recommended)

Manual Setup

Install @c15t/nextjs Package

Next.js Rewrites (Optional)

Adding it to your Next Application

Storing Consent

Install `@c15t/nextjs` Package

Install `@c15t/nextjs` Package