Przejdź do głównej zawartości

Dodawanie ConsentForge do Next.js

Opcja 1: Komponent Script (zalecane)​

Użyj komponentu <Script> Next.js ze strategią strategy="beforeInteractive", aby ConsentForge ładował się przed innymi skryptami:

// app/layout.tsx (App Router) lub pages/_document.tsx (Pages Router)
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://cdn.consentforge.com/consentforge.min.js"
          data-token={process.env.NEXT_PUBLIC_CONSENTFORGE_TOKEN}
          strategy="beforeInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Opcja 2: _document.tsx (Pages Router)​

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          src="https://cdn.consentforge.com/consentforge.min.js"
          data-token={process.env.NEXT_PUBLIC_CONSENTFORGE_TOKEN}
          defer
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Blokowanie skryptów stron trzecich​

Użyj strategy="lazyOnload" dla skryptów wymagających zgody — nie załadują się do momentu udzielenia zgody i zwolnienia ich przez ConsentForge:

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"
  data-consent-category="analytics"
  strategy="lazyOnload"
/>

Zmienne środowiskowe​

Dodaj do .env.local:

NEXT_PUBLIC_CONSENTFORGE_TOKEN=cf_live_your_token_here

TypeScript: typy window ConsentForge​

// types/consentforge.d.ts
interface Window {
  ConsentForge: {
    openPreferenceCenter: () => void;
    getConsent: (category: string) => boolean;
    on: (event: string, callback: (data: unknown) => void) => void;
  }
}