KATLA PARA NEXT.JS
Consentimento de cookies para Next.js que respeita o App Router.
Um SDK tipado com provider, hooks e Consent Mode v2 incluído. Tudo o que passa pelo provider continua a ser um Server Component, o banner é seu ou nosso, e nada bloqueia a renderização.
@katla.app/sdkApp Router + Pages RouterConsent Mode v2 incluído
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>
)
}O provider é a única fronteira de cliente: os children ficam no servidorGuia completo →
PORQUE É QUE OS SITES NEXT.JS TROPEÇAM NO CONSENTIMENTO
A maioria das plataformas de consentimento foi feita para uma tag script e um recarregamento da página.
O PROBLEMAO banner é um iframe de terceiros ou um script global com o qual a hidratação acaba por entrar em conflito.
COM O KATLAEm vez disso, um provider de React e hooks tipados. O estado do consentimento vive na sua árvore e volta a renderizar os componentes que o leem, como qualquer outro estado.
O PROBLEMAA analítica e os píxeis são carregados com next/script antes de o visitante ter decidido o que quer que seja.
COM O KATLACondicione-os a useKatlaConsent() e renderize a tag só depois de a respetiva categoria ser autorizada. Os sinais do Consent Mode v2 vêm do mesmo estado, por isso os dois não se podem contradizer.
O PROBLEMAUm banner alojado ignora os seus design tokens, e mudar-lhe o estilo é uma luta com uma folha de estilos.
COM O KATLAO modo headless não inclui interface nenhuma. Construa o banner com os seus próprios componentes, ou use o CookieBanner: não tem estilos, tem nomes de classe katla-* estáveis e uma render prop.
CONFIGURAÇÃO
Quatro passos, uma dependência.
- Instalarpnpm add @katla.app/sdk. Cerca de 4 KB transferidos em modo headless.
- Envolver o layoutAdicione o KatlaNextProvider a app/layout.tsx com o seu Site ID. É ele próprio que injeta o bloqueador de cookies.
- Condicionar os scriptsColoque as tags de analítica e de marketing atrás de uma verificação com useKatlaConsent().
- Pôr o banner no arUse o CookieBanner, ou construa o seu próprio com useConsentManager().
FEITO PARA NEXT.JS
As peças de que uma equipa de Next.js precisa mesmo.
Prefetch no servidorgetCachedCookies() lê o inventário num Server Component, sem pedidos duplicados graças ao cache() do React. Passe-o como initialCookies e o navegador não faz nenhum pedido.
Consent Mode v2Uma única prop googleConsentMode controla ad_storage, analytics_storage, ad_user_data e ad_personalization. Negados por predefinição, atualizados com a decisão.
Compatível com streamingSem scripts que bloqueiam a renderização e sem deslocamentos do layout. O provider assume a fronteira "use client" para que as suas páginas não tenham de o fazer.
Tipado de ponta a pontaCategorias, estado do consentimento, dados dos cookies e locales das políticas: está tudo tipado. Autocompletar em vez de um separador aberto na documentação.
Build sem pedidos em runtimekatla pull escreve o inventário e o bloqueador em .katla/; getStaticGuardScript() coloca o bloqueador inline no documento. Nada é pedido ao carregar a página.
Políticas como componentesKatlaPolicy renderiza a política de cookies ou de privacidade gerada, obtida no servidor com getCachedPolicy(), em qualquer um de 13 idiomas.
CORE WEB VITALS
Os cookies esfarelam-se. O seu SEO não devia.
Um script de consentimento é o primeiro recurso de terceiros em todas as páginas, e é por isso que aparece no relatório de Core Web Vitals. Em modo headless, o Katla transfere 4 KB (e, incorporado a partir de .katla/, nem sequer é um pedido), por isso o LCP e o INP ficam onde o seu build os deixou.
Como funciona o modo headless →4 kBTransferidoBloqueador de cookies e API de consentimento, brotli
0 msLCP acrescentadoFace à mesma página sem ele
0Deslocamento de layoutO banner não reserva espaço no fluxo
2PedidoUm script, em cache na edge
Medições nossas, feitas a : como foram feitas.
Perguntas que as equipas Next.js fazem
- Funciona com o Pages Router?
- Sim. Importe de @katla.app/sdk/react e envolva _app.tsx em vez de app/layout.tsx. Os hooks e os componentes são os mesmos.
- Posso ler os dados dos cookies no servidor?
- Sim: getCachedCookies() e getCachedPolicy() de @katla.app/sdk/next/server correm em Server Components e não se repetem dentro da mesma renderização. A decisão de consentimento em si é tomada no navegador, por isso lê-se através de useKatlaConsent() e não no servidor.
- Como se compara com o next/third-parties?
- Complementam-se. O next/third-parties carrega as tags; o Katla decide se podem carregar, bloqueia os cookies até poderem e guarda o registo da decisão.
- E as rotas com i18n?
- Passe o locale ao provider e as políticas geradas e as descrições dos cookies chegam nesse idioma. São suportados treze, de en-GB a sv-SE.
Adicione consentimento à sua app Next.js antes do almoço.
O plano gratuito analisa o seu site Next.js e gera uma política de cookies, sem cartão.