Next.js 16 arruinó tu app: Soluciones rápidas para errores invisibles

Next.js 16 cambió cómo maneja los errores en el servidor, haciendo que algunos bugs pasen desapercibidos hasta llegar a producción.

El truco

// ANTES (mal)
export async function getServerSideProps() {
  const data = await fetchData(); // Si fetchData falla, el error se pierde
  return { props: { data } };
}

// DESPUÉS (bien)
export async function getServerSideProps() {
  try {
    const data = await fetchData();
    return { props: { data } };
  } catch (error) {
    console.error('Error fetching data:', error);
    return { notFound: true }; // O maneja el error como necesites
  }
}

Usa un bloque try-catch en tus funciones getServerSideProps para capturar errores. Al no hacerlo, Next.js 16 puede ocultar fallos en la consola, y tu aplicación puede fallar silenciosamente. El error capturado puede registrarse con console.error para mayor visibilidad y manipularse según necesites, por ejemplo, devolviendo { notFound: true } para redirigir a la página 404.

Los errores invisibles son los más peligrosos. Asegúrate de que nada se te escape con un manejo adecuado de errores en funciones críticas.