1Consent × Next.js

Cookie consent for your Next.js application

Add consent gates to your App Router layouts and pages while preserving Server Component boundaries. Govern third-party markup without making every rendered page depend on a visitor’s consent cookie.

Public beta: @1consent/nextjs. Next.js 16 with React 19+; install from the explicit @beta channel.

Start with Next.js Set up with your AI

A provider in your root layout

import type { ReactNode } from "react";
import { OneConsentProvider } from "@1consent/nextjs";

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

Layout excerpt: add generated fast-path versions and service gates as shown in the setup guide. The provider belongs before governed resources.

Set up consent at the application boundary

Keep layout setup, service gates and client-side consent reads in their correct Next.js boundaries. Audit next/script and other vendor entry points before installation.

01
Review the root and script entry points
Identify the App Router layout, third-party scripts and existing CMP loaders. Check which components run on the server and which need a client boundary.
02
Use the Next.js adapter
Install @1consent/nextjs@beta and add the provider once. Render plain-markup gates from server components; useConsent belongs in a Client Component.
03
Check streaming and navigation
Test a fresh document, streamed content and client navigation. Preserve consent and script ordering without promising execution before every paint.

Let your coding assistant handle the setup

Connect a coding assistant that can inspect your Next.js repository. Ask it to keep the existing rendering and routing strategy while adding consent.

Prompt for your project

Integrate 1Consent in this Next.js app using the connected MCP. Inspect App Router layouts, next/script usage, vendor initialization and existing CMP setup. Read integration guidance and the selected app installation context. Use @1consent/nextjs@beta, add the provider once, generate service types and gate governed markup. Preserve Server Component boundaries and theme. Verify rejection, granular consent, withdrawal, streaming and client navigation. Explain any server-cookie rendering tradeoff and report unverified checks. Ask before account writes or publishing.

The assistant changes your project. The MCP supplies app context and guidance. A completed tool call does not prove that trackers respect consent; test the resulting website.

Connect your assistant to 1Consent

Use this production MCP server with OAuth in a compatible coding assistant. Sign in with your approved 1Consent account and select the intended app. Installation needs context and app-configuration reads; design and analytics access are separate choices.

Production MCP server URL

https://mcp.1consent.app/mcp

Open your Dashboard Connection and access guide Tools missing? Check your connection

Match the theme across server and client views

Configure the consent UI’s colors, typography and light/dark appearance in the Dashboard. Your application can retain its own styles, layouts and Server Component boundaries.

With separately approved access, the hosted MCP can edit customer theme drafts, assign them to frameworks and create a private real-runtime preview. Live publication requires your separate approval of the exact proposal in the Dashboard. Verify contrast, large text, preferences and actual delivered behavior in both color modes.

Check the result on your website

Check the actual rendered document and network activity, not just the React tree. Reading request cookies in a Server Component has rendering implications; optional server helpers are hints, not consent enforcement.

Open a fresh document and reject optional collection. Verify scripts in layouts and next/script do not bypass your gates.
Grant one service and confirm the expected gate activates with the configured framework and valid saved choice.
Reopen preferences and withdraw. Verify the post-reload document does not reactivate the revoked service.
Exercise streamed pages and client navigation. Check script dependency order and ensure no duplicate CMP or tracker initialization.

Record what was tested and what remains unverified. A visible banner or a successful build alone does not establish tracker enforcement or legal compliance.

Before you integrate

Can I keep React Server Components?

Yes. The Next.js adapter preserves the provider and gate boundaries for the App Router. useConsent remains a client hook. Follow the guide for the supported package versions and placement.

Will consent make every route dynamic?

The standard gate setup does not read a visitor’s consent on the server. Optional helpers that read cookies have separate rendering and caching implications. A server cookie hint never replaces the client-side CMP.

Can I use the standard script integration instead?

Yes, when it matches the app’s installation mode and tracker setup. Choose one CMP loader owner and follow its delivery instructions. The adapter is useful when you want explicit gates and typed service names in your component tree.

Choose your next step

Read the setup guide Lovable React