Integração com Next.js

App Router (Next.js 13+)

No App Router, use o componente Script do Next.js no layout raiz:

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <head>
        <Script
          src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js"
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router

No Pages Router, adicione o script no _document.tsx:

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
  return (
    <Html lang="pt-BR">
      <Head>
        <Script
          src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js"
          strategy="beforeInteractive"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Alternativa: você pode adicionar o script diretamente no _app.tsx com strategy="afterInteractive" se não precisar bloquear antes do hydration.

Com Consent Mode + GTM

Se você usa Google Tag Manager com Next.js, a Cookield funciona em conjunto com o Consent Mode v2:

// app/layout.tsx — com GTM + Cookield
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="pt-BR">
      <head>
        {/* Cookield — DEVE vir antes do GTM */}
        <Script
          src="https://cdn.cookield.io/banner/SEU_BANNER_ID.js"
          strategy="beforeInteractive"
        />
        {/* Google Tag Manager */}
        <Script
          src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

A ordem é importante: Cookield com beforeInteractive garante que os sinais de consent estejam definidos quando o GTM carregar.

Considerações de SSR

A Cookield é um script client-side. Algumas considerações para SSR/SSG:

• →Server Components: O script será incluído no HTML inicial enviado pelo servidor. Não há problemas de hydration.
• →Static Generation (SSG): Funciona perfeitamente — o script é adicionado ao HTML estático.
• →Edge Runtime: Compatível — o script é apenas uma tag no head.
• →Middleware: Se bloqueia requests por geo, a Cookield se adapta à legislação do país do visitante.

Checando consent no servidor

Se precisar verificar o status do consentimento em Server Actions ou Route Handlers, leia o cookie de consent:

// app/api/analytics/route.ts
import { cookies } from 'next/headers';

export async function POST(request: Request) {
  const cookieStore = cookies();
  const consent = cookieStore.get('cookield_consent');

  if (!consent) {
    return Response.json({ error: 'No consent' }, { status: 403 });
  }

  const consentData = JSON.parse(consent.value);

  if (!consentData.analytics) {
    return Response.json({ error: 'Analytics not consented' }, { status: 403 });
  }

  // Proceed with analytics processing...
  return Response.json({ ok: true });
}

Usando variáveis de ambiente

Para diferentes Banner IDs por ambiente (dev, staging, prod):

// .env.local
NEXT_PUBLIC_COOKIELD_BANNER_ID=ban_dev_123

// .env.production
NEXT_PUBLIC_COOKIELD_BANNER_ID=ban_prod_456

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-BR">
      <head>
        <Script
          src={`https://cdn.cookield.io/banner/${process.env.NEXT_PUBLIC_COOKIELD_BANNER_ID}.js`}
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}