Next.js integrationCopy Anchor Link

Use @1consent/nextjs@beta for Next.js 16 with React 19+. The adapter exposes the React provider, plain-markup gates and client hook, with an optional separate server entrypoint. Start with the Next.js overview for AI-assisted setup, or follow these steps manually.

Install and generate your app's service typesCopy Anchor Link

npm install @1consent/nextjs@beta
npx @1consent/cli@beta typegen --app YOUR_APP_ID

Use the public app ID from your Dashboard. Type generation reads published frameworks. It writes src/1consent.gen.ts when your project has a src directory, otherwise 1consent.gen.ts at the root. Use a relative import when your project has no matching @/ alias. Regenerate after publishing service/category changes, and check generated types in CI:

npx @1consent/cli@beta typegen --app YOUR_APP_ID --check

For a development/local 1Consent app, use the matching CLI --env and provider environment; service environment and publication stage are separate choices.

Put the provider in the root layoutCopy Anchor Link

import type { ReactNode } from 'react';
import { OneConsentProvider } from '@1consent/nextjs';
import { fastPathVersions } from '@/1consent.gen';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <OneConsentProvider
          appId="YOUR_APP_ID"
          fastPathVersions={fastPathVersions}
        >
          {children}
        </OneConsentProvider>
      </body>
    </html>
  );
}

Keep one owner for the CMP loader. Audit existing layout scripts, next/script, tag managers and vendor initialization before adding the provider. Content that already executed outside a consent gate is not protected retroactively.

Gate governed markupCopy Anchor Link

import { OneConsent } from '@1consent/nextjs';

export function OptionalVideo() {
  return (
    <OneConsent service="YOUR_CONFIGURED_VIDEO_SERVICE">
      <iframe title="Optional video" src="https://www.youtube.com/embed/VIDEO_ID" />
    </OneConsent>
  );
}

Replace the placeholder with an exact configured service accepted by your generated types. The provider and gates can be rendered from Server Components. Gate plain HTML output, not an arbitrary component or next/script component. For a tracker, keep both its external loader and inline initialization in the same governed block. Use once for global side effects that must not repeat on SPA remount; visual embeds should be recreated with their container and must not use once.

Client-side consent readsCopy Anchor Link

'use client';
import { useConsent } from '@1consent/nextjs';

export function AnalyticsStatus() {
  const granted = useConsent('YOUR_CONFIGURED_ANALYTICS_SERVICE');
  return <span>{granted ? 'enabled' : 'disabled'}</span>;
}

useConsent waits for known consent and reacts to changes. It belongs in a Client Component. The full provider/gate options are in the React guide.

Streaming, caching and timingCopy Anchor Link

The standard provider/gate flow does not read the visitor's consent on the server. Gated HTML remains cacheable independently of the visitor's choice.

With valid returning consent, matching generated structural versions and the synchronous hosted configuration, a complete gate can activate when its parser resolver runs. Preserve dependency order, but do not promise execution before first paint: a streamed page can paint before a later gate arrives and external downloads can finish later. Missing, stale or expired consent remains inert until the CMP establishes current permission. SPA gates activate after mounting.

The optional @1consent/nextjs/server entrypoint exposes validated cookie helpers. Reading request cookies in a Server Component affects rendering/caching. Use the helper deliberately in a supported Proxy/Route Handler when needed. Its result is a server-side hint, never a replacement for client-side enforcement.

Theme and verifyCopy Anchor Link

Configure and publish the CMP theme in the Dashboard; match the application's colors, typography and color modes. The MCP's theme schema/source reads do not provide a theme-writing or production-publishing operation.

On a real build, test fresh load and rejection, a granular service grant, preferences reopening, withdrawal and the subsequent reload. Exercise streamed pages and client navigation, inspect vendor requests/storage, and check duplicate initialization and dependency order. A successful build or visible banner alone does not prove enforcement. Report any scenario that could not be verified.