KATLA JA NEXT.JS

Next.js-evästesuostumus, joka kunnioittaa App Routeria.

Tyypitetty SDK, jossa on provider, hookit ja sisäänrakennettu Consent Mode v2. Kaikki, mitä välität providerin läpi, pysyy Server Componentina, banneri on sinun tai meidän, eikä mikään estä renderöintiä.

Lue Next.js-opasAloita ilmaiseksi
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 valmiina
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 on ainoa client-raja: lapsikomponentit pysyvät palvelimellaKoko opas →
SUOSTUMUKSEN SUDENKUOPAT: NEXT.JS

Useimmat suostumusalustat tehtiin script-tagille ja sivun uudelleenlataukselle.

ONGELMABanneri on kolmannen osapuolen iframe tai globaali skripti, jonka kanssa hydraatio päätyy kamppailemaan.
KATLALLASen sijaan React-provider ja tyypitetyt hookit. Suostumuksen tila elää komponenttipuussasi ja renderöi uudelleen sitä lukevat komponentit, kuten mikä tahansa muu tila.
ONGELMAAnalytiikka ja pikselit ladataan next/scriptillä ennen kuin kävijä on päättänyt mitään.
KATLALLAKytke ne useKatlaConsent()-tarkistukseen ja renderöi tagi vasta, kun sen luokka on sallittu. Consent Mode v2 -signaalit tulevat samasta tilasta, joten ne eivät voi olla ristiriidassa keskenään.
ONGELMAIsännöity banneri ei välitä design-tokeneistasi, ja sen uudelleentyylittely on taistelua tyylitiedostoa vastaan.
KATLALLAHeadless-tila ei toimita käyttöliittymää lainkaan. Rakenna banneri omista komponenteistasi tai ota CookieBanner: se on tyylittelemätön, ja siinä on vakaat katla-*-luokkanimet ja render prop.
KÄYTTÖÖNOTTO

Neljä vaihetta, yksi riippuvuus.

  1. Asennapnpm add @katla.app/sdk. Headless-tilassa siirtokoko on noin 4 kt.
  2. Kääri layoutLisää KatlaNextProvider tiedostoon app/layout.tsx sivustosi Site ID:llä. Se lisää evästevahdin itse.
  3. Kytke skriptit suostumukseenLaita analytiikka- ja markkinointitagit useKatlaConsent()-tarkistuksen taakse.
  4. Julkaise banneriLisää CookieBanner tai rakenna oma useConsentManager()-hookin avulla.
TEHTY ALUSTALLE NEXT.JS

Osat, joita Next.js-tiimi oikeasti tarvitsee.

Esihaku palvelimellagetCachedCookies() lukee evästeluettelon Server Componentissa, ja React cache() poistaa päällekkäiset haut. Välitä se initialCookies-arvona, niin selain ei tee yhtään pyyntöä.
Consent Mode v2Yksi googleConsentMode-prop ohjaa signaaleja ad_storage, analytics_storage, ad_user_data ja ad_personalization. Oletuksena evätty, päivittyy päätöksen myötä.
Turvallinen streamingilleEi renderöinnin estävää skriptiä eikä asettelun siirtymää. Provider kantaa "use client" -rajan, joten sivujesi ei tarvitse.
Tyypitetty päästä päähänLuokat, suostumuksen tila, evästetiedot ja käytäntöjen kielet ovat kaikki tyypitettyjä. Automaattinen täydennys dokumentaatiovälilehden sijaan.
Build ilman ajonaikaisia hakujakatla pull kirjoittaa evästeluettelon ja evästevahdin hakemistoon .katla/; getStaticGuardScript() upottaa vahdin dokumenttiin. Sivun latautuessa ei haeta mitään.
Käytännöt komponentteinaKatlaPolicy renderöi luodun evästekäytännön tai tietosuojaselosteen, palvelimella getCachedPolicy()-funktiolla haettuna, millä tahansa 13 kielestä.
CORE WEB VITALS

Keksi saa murentua. Hakukonesijoituksesi ei.

Suostumusskripti on jokaisen sivun ensimmäinen kolmas osapuoli, ja siksi se näkyy Core Web Vitals -raportissa. Headless-tilassa Katlan siirtokoko on 4 kt, ja .katla/-hakemistosta upotettuna se ei ole pyyntö lainkaan, joten LCP ja INP pysyvät siellä, mihin buildisi ne jätti.

Näin headless-tila toimii →
4 kBSiirtomääräEvästevahti ja suostumus-API, brotli
0 msLCP-lisäysVerrattuna samaan sivuun ilman sitä
0Asettelun siirtymäBanneri ei varaa tilaa sivun rakenteesta
2PyyntöYksi skripti, välimuistissa CDN:n reunalla

Omat mittauksemme, tehty : näin ne tehtiin.

Usein kysyttyä: Next.js

Toimiiko se Pages Routerin kanssa?
Kyllä. Tuo importit polusta @katla.app/sdk/react ja kääri _app.tsx tiedoston app/layout.tsx sijaan. Hookit ja komponentit ovat samat.
Voinko lukea evästetietoja palvelimella?
Kyllä. Polun @katla.app/sdk/next/server getCachedCookies() ja getCachedPolicy() toimivat Server Componenteissa, ja päällekkäiset kutsut yhdistetään renderöintikohtaisesti. Itse suostumuspäätös tehdään selaimessa, joten se luetaan useKatlaConsent()-hookilla eikä palvelimella.
Miten tämä eroaa next/third-parties-paketista?
Ne täydentävät toisiaan. next/third-parties lataa tagit; Katla päättää, saavatko ne latautua, estää evästeet siihen asti ja tallentaa kirjauksen päätöksestä.
Entä i18n-reitit?
Välitä providerille locale, niin luodut käytännöt ja evästekuvaukset palautuvat sillä kielellä. Tuettuja kieliä on kolmetoista, en-GB:stä sv-SE:hen.
KATLA ALUSTOILLE
Katla ja ReactKatla ja TypeScriptKatla ja WordPressKatla ja Google Tag ManagerKatla ja LovableKatla ja WixKatla ja SquarespaceKatla ja WebflowKatla ja FramerKatla ja GhostKatla ja HubSpotKatla ja KajabiKatla ja JoomlaKatla ja Shopify (tulossa)

Lisää suostumus Next.js-sovellukseesi ennen lounasta.

Ilmaispaketti skannaa Next.js-sivustosi ja luo evästekäytännön ilman korttia.

Aloita ilmaiseksi