Next.js consent and scripts

Register scripts in c15t.config.ts

The runnable Next.js example loads PostHog under the measurement category. Replace the placeholder phc_your_project_key with your project key, or replace the helper with the integration your application uses. Include the measurement category in your policy.

Put the scripts in c15t.config.ts, next to next.config.ts:

import { posthog } from '@c15t/integrations/posthog';
import { defineConsentConfig } from 'c15t/next';

export default defineConsentConfig({
	scripts: [
		posthog({
			id: 'phc_your_project_key',
			initOptions: { cookieless_mode: 'never' },
			loadMode: 'after-consent',
		}),
	],
});

PostHog waits for measurement consent here. cookieless_mode: 'never' disables cookieless capture after rejection. Remove any existing PostHog loader, including next/script and tag-manager entries, so the integration loads once.

withConsentManifest in next.config.ts finds the file, and ConsentRoot reads its scripts in the browser, so a Server Component layout renders ConsentRoot without passing them. The file is bundled into the browser as well as the server, so it must hold no secrets.

scripts, vendors, clearOnRevocation, networkBlocker, persistence, scriptLoader and options can also be passed to ConsentRoot as props, which win over the config. Functions can't cross from a Server Component to a Client Component, so pass them as props only from a 'use client' file.