Skip to main content

Next.js & React Integration Guide

Deploy Consent Shield AI into modern React and Next.js applications with zero server-side rendering (SSR) hydration mismatches, zero layout shift, and automated route change tracking.

1. Installation via NPM / Yarn / PNPM​

Install the official React SDK package:

npm install @consentshield/react
# or
yarn add @consentshield/react
# or
pnpm add @consentshield/react

2. Next.js App Router Setup (app/layout.tsx)​

Wrap your root layout with ConsentShieldProvider and include the defense script:

import { ConsentShieldProvider, ConsentShieldScript } from '@consentshield/react';
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'My Next.js Application',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <ConsentShieldScript 
          siteId={process.env.NEXT_PUBLIC_CONSENT_SHIELD_SITE_ID!} 
          autoBlock={true}
          gpcEnforce={true}
        />
      </head>
      <body>
        <ConsentShieldProvider>
          {children}
        </ConsentShieldProvider>
      </body>
    </html>
  );
}

Use the useConsent hook to conditionally render analytics components or trigger opt-out preferences:

'use client';

import { useConsent } from '@consentshield/react';

export function AnalyticsController() {
  const { consent, updateConsent, isGpcActive } = useConsent();

  return (
    <div className="p-4 border rounded">
      <h3>Privacy Settings</h3>
      <p>GPC Signal: {isGpcActive ? 'Detected (Active)' : 'Not Active'}</p>
      
      <label>
        <input 
          type="checkbox" 
          checked={consent.advertising} 
          onChange={(e) => updateConsent({ advertising: e.target.checked })} 
        />
        Enable Marketing Cookies
      </label>
    </div>
  );
}