Cenário: erro de hydration mismatch
Pergunta
O console mostra 'Hydration failed: server HTML didn't match the client'. O que causa isso no Next e como resolver?
Resposta esperada
O servidor renderiza um HTML; no cliente, o React hidrata esperando gerar exatamente o mesmo. Se o primeiro render do cliente produz algo diferente, quebra. Causas comuns: usar valores que diferem entre servidor e cliente no render (`Date.now()`, `Math.random()`, `new Date().toLocaleString()` com timezone/locale diferente, `window`/`localStorage` — que não existem no servidor); HTML inválido/aninhamento proibido (`<p>` dentro de `<p>`, `<div>` dentro de `<p>`) que o navegador 'conserta' e o React não; e extensões de navegador que alteram o DOM antes da hidratação. Soluções: renderizar o valor variável só depois de montar (`useEffect` + estado, ou um `useSyncExternalStore`); `suppressHydrationWarning` no elemento específico quando a diferença é esperada e inofensiva (um timestamp); `next/dynamic` com `ssr: false` pra componentes que só fazem sentido no cliente; e corrigir HTML inválido.
Por que perguntam isso
Cenário pleno de Next. Sinal de experiência: listar as causas concretas (locale/timezone, window no render, HTML inválido) e as três saídas.