Next.js e un framework preferat pentru site-uri moderne și rapide, dar tocmai natura lui, cu randare pe server și hidratare pe client, ridică o întrebare practică: unde pui snippet-ul de cookies ca să pornească înaintea scripturilor de marketing? Acest ghid arată abordarea corectă atât pentru App Router, cât și pentru Pages Router.

Spre deosebire de un site HTML, unde controlezi manual head-ul, în Next.js ordinea de încărcare a scripturilor e gestionată de framework prin componenta next/script și prin strategiile ei. Înțelegerea acestor strategii e cheia pentru un banner care blochează efectiv, nu doar afișează.

De ce Next.js cere puțină atenție în plus

Într-un site static, pui snippet-ul în <head> și gata. În Next.js, head-ul e gestionat de framework, iar scripturile terțe se adaugă adesea prin componenta next/script, care controlează momentul încărcării. Trebuie să te asiguri că logica de consimțământ pornește înaintea Analytics-ului sau a pixelului. În Republica Moldova se aplică Legea nr. 133/2011, iar pentru publicul din UE se adaugă GDPR: consimțământul trebuie să preceadă cookie-urile non-esențiale.

Pentru App Router: în layout, cu strategy beforeInteractive

Pe App Router (folderul app/), locul potrivit e app/layout.tsx:

  1. Din GDPR Moldova, obține snippet-ul generat pentru domeniul tău.
  2. Importă Script din next/script.
  3. În componenta root layout, adaugă snippet-ul cu strategy="beforeInteractive", astfel încât să se injecteze devreme, înaintea codului interactiv.
  4. Asigură-te că scripturile de Analytics/pixel folosesc o strategie ulterioară (de exemplu afterInteractive), ca să pornească după logica de consimțământ.
  5. Rulează build-ul și testează pe versiunea de producție, nu doar în dev.

Cu beforeInteractive, snippet-ul setează starea de consimțământ „denied by default" prin Google Consent Mode v2 înainte ca scripturile de marketing să apuce să se declanșeze.

Pentru Pages Router: în _document sau _app

Dacă proiectul folosește Pages Router (folderul pages/):

  1. Deschide pages/_document.tsx și adaugă snippet-ul în <Head>, ori folosește Script cu strategy="beforeInteractive" în _document.
  2. Alternativ, în pages/_app.tsx poți încărca snippet-ul global, dar _document e mai potrivit pentru cod care trebuie să fie prezent în head-ul fiecărei pagini.
  3. Verifică din nou ordinea: consimțământul întâi, marketingul după.

Grijă la scripturile terțe și la componentele de analytics

Multe proiecte Next.js folosesc pachete gata făcute pentru GA4, Meta Pixel sau Vercel Analytics. Verifică fiecare astfel de integrare: ideal, o lași sub controlul semnalelor Consent Mode, ca să nu pornească independent la hidratare. Snippet-ul GDPR Moldova gestionează aceste semnale, așa că scripturile respectă alegerea vizitatorului.

Atenție și la componentele care rulează pe client ("use client") și declanșează evenimente de tracking la montare: dacă ele nu verifică starea de consimțământ, pot trimite date înainte de accept. Regula rămâne aceeași ca peste tot: logica de consimțământ se încarcă prima, iar orice cod care atinge cookie-uri de statistici sau marketing așteaptă semnalul ei.

Testare și politica de cookies

Înainte de deploy final:

  1. Rulează next build && next start și deschide site-ul într-o fereastră privată.
  2. Confirmă că banner-ul apare la prima vizită, cu Accept și Refuz clare.
  3. În tab-ul Network al browserului, verifică înainte de accept că request-urile către GA/pixel nu pleacă; după accept, ele apar.
  4. Publică politica de cookies generată de GDPR Moldova în română și rusă, ca pagină dedicată, legată în footer.

Cu snippet-ul încărcat devreme și scripturile de marketing în urma lui, proiectul tău Next.js rămâne rapid și, în același timp, conform.

Material orientativ, nu constituie consultanță juridică.