KATLA DLA NEXT.JS
Zgoda na pliki cookie w Next.js, która szanuje App Router.
Typowane SDK z providerem, hookami i wbudowanym Consent Mode v2. Wszystko, co przekazujesz przez provider, pozostaje komponentem serwerowym, baner może być Twój albo nasz, a nic nie blokuje renderowania.
@katla.app/sdkApp Router + Pages RouterWbudowany Consent Mode v2
app/layout.tsxApp Router
import { KatlaNextProvider } from '@katla.app/sdk/next'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<KatlaNextProvider siteId="your-site-id" googleConsentMode>
{children}
</KatlaNextProvider>
</body>
</html>
)
}Provider to jedyna granica po stronie klienta, komponenty potomne zostają na serwerzePełny przewodnik →
DLACZEGO STRONY NA NEXT.JS MAJĄ KŁOPOT ZE ZGODĄ
Większość platform do zgód powstała z myślą o tagu script i przeładowaniu strony.
PROBLEMBaner to iframe zewnętrznego dostawcy albo globalny skrypt, z którym hydracja prędzej czy później zaczyna walczyć.
Z KATLĄZamiast tego provider Reacta i typowane hooki. Stan zgody żyje w Twoim drzewie komponentów i ponownie renderuje komponenty, które go czytają, jak każdy inny stan.
PROBLEMAnalityka i piksele ładują się przez next/script, zanim odwiedzający cokolwiek zdecyduje.
Z KATLĄUzależnij je od useKatlaConsent() i renderuj tag dopiero wtedy, gdy jego kategoria dostanie zgodę. Sygnały Consent Mode v2 pochodzą z tego samego stanu, więc jedno nie może przeczyć drugiemu.
PROBLEMHostowany baner ignoruje Twoje design tokeny, a zmiana jego wyglądu to walka z cudzym arkuszem stylów.
Z KATLĄTryb headless nie dostarcza żadnego interfejsu. Zbuduj baner z własnych komponentów albo weź CookieBanner: jest bez stylów, ma stabilne nazwy klas katla-* i render prop.
KONFIGURACJA
Cztery kroki, jedna zależność.
- Instalacjapnpm add @katla.app/sdk. W trybie headless to około 4 KB transferu.
- Opakuj layoutDodaj KatlaNextProvider ze swoim Site ID do app/layout.tsx. Blokadę cookies wstrzykuje sam.
- Zabezpiecz skryptyUzależnij tagi analityczne i marketingowe od sprawdzenia useKatlaConsent().
- Wdróż banerWstaw CookieBanner albo zbuduj własny baner na useConsentManager().
STWORZONE DLA NEXT.JS
To, czego zespół pracujący z Next.js naprawdę potrzebuje.
Prefetch po stronie serweragetCachedCookies() odczytuje spis plików cookie w komponencie serwerowym, z deduplikacją przez React cache(). Przekaż go jako initialCookies, a przeglądarka nie wyśle żadnego żądania.
Consent Mode v2Jeden prop googleConsentMode steruje ad_storage, analytics_storage, ad_user_data i ad_personalization. Domyślnie odmowa, aktualizacja po decyzji.
Bezpieczne dla streaminguŻadnego skryptu blokującego renderowanie i żadnego przesunięcia układu. Granicę "use client" bierze na siebie provider, więc Twoje strony nie muszą.
Typy od początku do końcaKategorie, stan zgody, dane o plikach cookie i języki polityk są w pełni typowane. Autouzupełnianie zamiast otwartej karty z dokumentacją.
Buildy bez pobierania w runtimekatla pull zapisuje spis plików cookie i blokadę do .katla/, a getStaticGuardScript() wstawia blokadę inline do dokumentu. Przy ładowaniu strony nic nie jest pobierane.
Polityki jako komponentyKatlaPolicy renderuje wygenerowaną politykę cookies lub politykę prywatności, pobraną na serwerze przez getCachedPolicy(), w dowolnym z 13 języków.
CORE WEB VITALS
Ciasteczka się kruszą. Twoje SEO nie musi.
Skrypt zgody to pierwsza usługa zewnętrzna na każdej stronie, dlatego pojawia się w raporcie Core Web Vitals. W trybie headless Katla to 4 KB transferu, a wstawiona inline z .katla/ nie jest w ogóle osobnym żądaniem, więc LCP i INP zostają tam, gdzie ustawił je Twój build.
Jak działa tryb headless →4 kBTransferBlokada i API zgody, brotli
0 msWzrost LCPW porównaniu z tą samą stroną bez niego
0Przesunięcie układuBaner nie rezerwuje miejsca w układzie strony
2ŻądanieJeden skrypt, cache’owany na brzegu sieci
Nasze własne pomiary z : jak je wykonaliśmy.
Pytania od zespołów pracujących z Next.js
- Czy działa z Pages Routerem?
- Tak. Importuj z @katla.app/sdk/react i opakuj _app.tsx zamiast app/layout.tsx. Hooki i komponenty są te same.
- Czy mogę odczytać dane o plikach cookie na serwerze?
- Tak: getCachedCookies() i getCachedPolicy() z @katla.app/sdk/next/server działają w komponentach serwerowych i są deduplikowane w ramach jednego renderowania. Sama decyzja o zgodzie zapada w przeglądarce, więc odczytuje się ją przez useKatlaConsent(), a nie na serwerze.
- Jak to się ma do next/third-parties?
- Jedno uzupełnia drugie. next/third-parties ładuje tagi, a Katla decyduje, czy wolno im się załadować, blokuje pliki cookie, dopóki nie wolno, i przechowuje zapis decyzji.
- A trasy z i18n?
- Przekaż locale do providera, a wygenerowane polityki i opisy plików cookie wrócą w tym języku. Obsługiwanych języków jest trzynaście, od en-GB do sv-SE.
Dodaj obsługę zgody do aplikacji Next.js jeszcze przed lunchem.
Darmowy plan skanuje Twoją stronę na Next.js i generuje politykę cookies, bez podawania karty.