Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js

Este error ocurre cuando el HTML generado en el servidor (SSR/SSG) no coincide con el HTML que React intenta hidratar en el navegador. Es un problema crítico que rompe la hidratación y puede dejar la aplicación inestable o no funcional.

Causa raíz

En tu caso, el error está relacionado con contenido dinámico que cambia entre renderizado en servidor y renderizado en cliente, específicamente con fechas/horas que varían según la zona horaria (como JUN 9, JUN 11, JUN 18 y VIEW EVENTS›). Estas fechas probablemente se generan usando new Date() o APIs dependientes del contexto del navegador (como Intl.DateTimeFormat con zona horaria local), lo cual produce resultados distintos en el servidor (donde no hay window, Date.now() puede ser estático o no estar disponible) y en el cliente.

Además, si usas librerías como date-fns, moment, o manipulación manual de fechas sin considerar SSR, es muy probable que estés inyectando valores distintos en cada entorno.

Solución definitiva (pasos)

✅ Paso 1: Aisla el contenido dinámico no determinista

Identifica dónde se renderizan las fechas dinámicas. Busca en tus componentes:

Uso de new Date(), Date.now(), toLocaleDateString(), format(), etc.
Lógica que depende de typeof window !== 'undefined' dentro del render.
Uso de localStorage, navigator, window.innerWidth, etc.

✅ Paso 2: Usa `suppressHydrationWarning` solo donde sea estrictamente necesario

Si el contenido es intencionalmente distinto (como un contador de tiempo real, o una fecha "hoy" que cambia), envuelve el elemento problemático con suppressHydrationWarning.

// Ejemplo corregido para una fecha dinámica
<time 
  dateTime={event.date.toISOString()} 
  suppressHydrationWarning
>
  {event.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
</time>