Manejo de Páginas No Encontradas en Next.js: Implementando notFound() desde Server Components

Introducción

¿Alguna vez has intentado acceder a una página que no existe en tu aplicación Next.js? Peor aún, ¿has intentado hacerlo desde un componente Server Side y no sabías cómo manejarlo? En este artículo, te mostramos cómo implementar correctamente la página NotFound.tsx en Next.js y cómo usar notFound() desde Server Components. ¡Acompáñanos para resolver errores 404 de forma elegante!

Este contenido está dirigido a desarrolladores que trabajan con Next.js 13+ y quieren dominar el manejo de rutas personalizadas. Al finalizar, sabrás cómo detectar rutas inválidas y redirigir al lector a una página de error personalizada, incluso desde lógica server-side.

¿Por qué es importante manejar 404 correctamente?

Antes de adentrarnos en el código, entendamos el contexto. Las páginas no encontradas (404 Not Found) son un punto crítico en cualquier aplicación. Un manejo inadecuado puede:

• Dejar al usuario confundido
• Dañar la experiencia de usuario
• Afectar el posicionamiento SEO

En Next.js, las páginas no encontradas se manejan mediante el componente NotFound, pero hay matices al usar notFound() desde Server Components. Esto es especialmente útil cuando necesitas verificar condiciones server-side antes de mostrar un error.

Implementando notFound() en Server Components

1. Creando el componente NotFound.tsx

Empezemos creando la página de error personalizada. En app/components/NotFound.tsx:

// NotFound.tsx
import { useRouter } from 'next/router';

export default function NotFound() {
  const router = useRouter();

  return (
    <div style="text-align: center; padding: 2rem;">
      <h1>❌ Página no encontrada</h1>
      <p>La ruta "{router.asPath}" no existe. ¿Volver a la página principal?
    </div>
  );
}

¿Qué hace este código?

• Usa useRouter para mostrar la ruta solicitada
• Muestra un mensaje amigable
• No requiere run: ya que es un componente client-side

Cuando ejecutas esta página desde el cliente, verás algo como:

// Ejemplo de consola (no aplica, pero para ilustrar):
console.log('Acceso a /invalid-route');
// Salida: Acceso a /invalid-route

2. Usando notFound() desde Server Components

Ahora, veamos cómo lanzar notFound() desde un Server Component. Por ejemplo, en app/routes/invalid-route/route.js:

// invalid-route/route.js
import { notFound } from 'next/navigation';

export default function Handler() {
  // Simulamos una condición que falla
  const errorCondition = true;

  if (errorCondition) {
    notFound('Ruta inválida');
  }

  return <div>Contenido normal...</div>;
}

Cuando se cumple errorCondition, notFound():

• Detiene la navegación
• Muestra la página NotFound.tsx
• Pasa el mensaje como error en props

Salida esperada:

// Simulación de consola:
console.log('Lanzando notFound con mensaje: Ruta inválida');
// Salida: Lanzando notFound con mensaje: Ruta inválida

Si no usas notFound(), la navegación seguiría hacia NotFound.tsx automáticamente, pero perderías el contexto del error.

Buenas prácticas y errores comunes

✅ Recomendaciones

1. Usa notFound() solo cuando necesites lógica server-side
   • No para redirecciones simples (usar next/navigation en client-side es suficiente)
2. Maneja todos los casos posibles
   • Incluye else en condiciones para evitar errores silenciosos
3. Personaliza el mensaje
   • El segundo parámetro de notFound() es opcional pero mejora la UX

❌ Errores comunes

• 🚫 Usar notFound() en condiciones client-side (sea ineficaz)
• 🚫 No validar rutas en server-side cuando sea posible
• 🚫 Ignorar el mensaje personalizado (deja el usuario sin contexto)

Conclusión

Manejar páginas no encontradas en Next.js es una tarea esencial para cualquier aplicación web. Al combinar NotFound.tsx con notFound() desde Server Components, puedes crear experiencias de error más robustas y personalizadas. Recuerda:

1. Usa notFound() cuando necesites validar condiciones server-side
2. Personaliza siempre el mensaje de error
3. Prueba con rutas reales para validar el flujo

¿Quieres mejorar tu manejo de errores? Prueba implementando un sistema de monitoreo de errores con herramientas como Sentry o Rollbar junto a estas técnicas.

¿Tienes dudas o casos específicos? Deja un comentario abajo. ¡Tu experiencia es valiosa!

Próximos pasos

• Implementa un error.js global para manejar errores asíncronos
• Crea una página de error personalizada para diferentes tipos de errores
• Integra el manejo de 404 con Google Analytics