Consentimiento de cookies para Next.js

Con Croombit: crea un sitio para este proyecto con las categorías de cookies Analítica (ANALYTICS) y Publicidad (MARKETING), desactivadas por defecto, publícalas y publica el banner. Crea una clave publicable de TEST para localhost:3000. Es un proyecto Next.js con App Router: carga cmp.js en el layout raíz con next/script y strategy="beforeInteractive", leyendo la clave de NEXT_PUBLIC_CROOMBIT_KEY en .env.local, y añade un enlace "Configurar cookies" al pie.

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {/* beforeInteractive: loaded before any other script, as consent managers need */}
        <Script
          src="https://croombit.com/cmp.js"
          strategy="beforeInteractive"
          data-tc-api-key={process.env.NEXT_PUBLIC_CROOMBIT_KEY}
        />
        {children}
      </body>
    </html>
  );
}

// Any tag loaded through next/script or @next/third-parties is inserted
// by JavaScript, so cmp.js holds known hosts (gtag.js, GTM, Meta Pixel…)
// until the visitor grants the matching category.
import { GoogleAnalytics } from '@next/third-parties/google';

<GoogleAnalytics gaId="G-XXXX" />

'use client';
// Any element with data-tc-open-preferences reopens the panel,
// pre-set to the visitor's current choices.
export function CookieSettingsLink() {
  return <a href="#" data-tc-open-preferences>Configurar cookies</a>;
}

import { CroombitClient } from '@croombit/sdk';

// Server side, with a secret key — e.g. in your signup handler.
const tc = new CroombitClient({
  baseUrl: 'https://api.croombit.com',
  apiKey: process.env.CROOMBIT_SECRET_KEY!,
});
await tc.recordConsent(
  { subject: 'email:' + user.email, purpose: 'newsletter', state: 'GRANTED', channel: 'signup_form' },
  { idempotencyKey: crypto.randomUUID() },
);