Pergunta
Estou recebendo o seguinte erro ao iniciar meu projeto Next.js:
Hydration failed because the initial UI does not match what was rendered on the server.
Unexpected attribute: cz-shortcut-listen="true"
O Next.js aponta para o meu layout.tsx, indicando que o HTML inicial não corresponde ao que foi renderizado pelo servidor.
É importante destacar que este erro não é o mesmo que ocorre com o Chakra UI, onde aparece:
A tree hydrated but some attributes of the server rendered HTML didn't match the client properties.
Para esse erro do Chakra, a própria documentação orienta adicionar suppressHydrationWarning no elemento <html>:
<html suppressHydrationWarning>
<body>
<Provider>{children}</Provider>
</body>
</html>
Isso remove o aviso, mas não resolve o problema de fundo; é apenas um “silenciador” temporário até que a correção oficial seja aplicada pelo Next.js, como mencionado na documentação.
No entanto, o erro que estou enfrentando é diferente. No meu caso, o atributo inesperado é:
cz-shortcut-listen="true"
Gostaria de entender o que causa esse problema e como resolvê-lo.
Resposta
Depois de investigar por bastante tempo, descobri que o erro ocorre porque o HTML renderizado no cliente está recebendo atributos adicionais que não existem no HTML enviado pelo servidor. Quando o navegador insere atributos extras no <html> ou <body>, o Next.js detecta a diferença entre:
o HTML SSR (gerado no servidor)
o HTML client-side (montado no navegador)
Essa diferença faz o Next gerar o erro de hidratação.
No caso específico:
Unexpected attribute: cz-shortcut-listen="true"
isso significa que algum processo do ambiente do navegador adicionou automaticamente esse atributo durante a renderização no cliente. Como o servidor não adiciona esse atributo, os dois DOMs não coincidem, e o erro é acionado.
Esse comportamento não tem relação com o Chakra UI ou com suppressHydrationWarning.
É um problema diferente.
Solução
A solução é garantir que o navegador não insira atributos adicionais no DOM durante o carregamento da aplicação.
A forma mais simples de verificar e resolver é:
1. Abrir o projeto em uma janela anônima/privada do navegador
No modo privado, nada interfere no DOM, e o HTML carregado no cliente permanece idêntico ao do servidor. Isso elimina o erro imediatamente.
2. Outra opção
Desativar recursos do navegador que possam modificar automaticamente a página durante a renderização.
3. Alternativa adicional
Utilizar um navegador separado, configurado de forma limpa, exclusivamente para desenvolvimento.
Isso evita qualquer interferência indesejada no HTML gerado pelo cliente.
