---
title: Quickstart
description: Integrate c15t into your Next.js application with this step-by-step guide. We'll cover installation, configuration, and basic usage.
lastModified: 2025-08-26
availableIn:
  - framework: 'javascript'
    url: '/docs/frameworks/javascript/quickstart'
    title: 'JavaScript'
  - framework: 'react'
    url: '/docs/frameworks/react/quickstart'
    title: 'React'
  - framework: 'next'
    url: '/docs/frameworks/next/quickstart'
    title: 'Next.js'
---
## CLI Setup (Recommended)

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

| Package manager | Command                       |
| :-------------- | :---------------------------- |
| npm             | `npx @c15t/cli generate`      |
| pnpm            | `pnpm dlx @c15t/cli generate` |
| yarn            | `yarn dlx @c15t/cli generate` |
| bun             | `bunx @c15t/cli generate`     |

## Manual Setup

1. **Install @c15t/nextjs Package**

   | Package manager | Command                    |
   | :-------------- | :------------------------- |
   | npm             | `npm install @c15t/nextjs` |
   | pnpm            | `pnpm add @c15t/nextjs`    |
   | yarn            | `yarn add @c15t/nextjs`    |
   | bun             | `bun add @c15t/nextjs`     |

2. **Next.js Rewrites (Optional)**

   > 💡 Tip:
   >
   > 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.

   ```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;
   ```

3. **Adding it to your Next Application**

   > 💡 Tip:
   >
   > 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.

   ```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.

   ```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](/docs/frameworks/next/storing-consent/hosted) with [consent.io](https://consent.io) to store your consent.