Next.js 16 me rompió la app: Soluciónalo con este hack

Actualizas a Next.js 16 y de repente, ¡boom! Errores silenciosos empiezan a aparecer.

El truco

// ANTES: Código propenso a errores silenciosos
export default function MyComponent() {
  const data = fetchData(); // Un "undefined" o error de red puede romperte aquí
  return <div>{data.title}</div>;
}

// DESPUÉS: Mejora la gestión de errores
import { useEffect, useState } from 'react';

export default function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then((result) => setData(result))
      .catch((err) => setError(err));
  }, []);

  if (error) return <div>Error: {error.message}</div>;
  if (!data) return <div>Cargando...</div>;

  return <div>{data.title}</div>;
}

Aprovecha useState y useEffect para manejar los estados de carga y error de forma explícita. Así, identificas problemas de red o datos no recibidos antes de que impacten la app. Este enfoque te ayuda a detectar errores silenciosos porque te obliga a gestionar los estados de error y carga, proporcionando feedback visual inmediato al usuario.

No dejes que Next.js 16 te amargue el día: maneja los errores con gracia y sigue adelante.