Creando Middleware Personalizado y Avanzado en Next.js App Router 🚀

Introducción al Middleware en Next.js ⚡

El Middleware en Next.js es una potente herramienta que te permite ejecutar código antes de que una petición sea completada. A medida que tus aplicaciones web crecen, la necesidad de interceptar peticiones para verificar la autenticación, aplicar redirecciones basadas en geolocalización o modificar cabeceras HTTP se vuelve fundamental. Con el App Router, el middleware se configura de manera centralizada y opera en el Edge Runtime, garantizando una latencia mínima.

¿Cómo Funciona el Ciclo de Vida del Middleware? 🔄

Antes de escribir código, es importante comprender en qué momento entra en juego el middleware dentro del ciclo de solicitud y respuesta de Next.js. Cuando un usuario intenta acceder a una ruta, el middleware intercepta la petición HTTP, evalúa las condiciones programadas y decide si permite el acceso, si redirige al usuario a otra URL, o si reescribe el destino.

Características Clave del Edge Runtime

• Ejecución ultrarrápida cercana al usuario.
• Limitaciones de Node.js (no puedes usar todos los módulos nativos como fs).
• Soporte para APIs Web estándar como Request, Response, y fetch.

Configuración Inicial y Estructura del Archivo 🛠️

Para implementar un middleware en tu proyecto de Next.js, debes crear un archivo llamado exactamente middleware.ts (o middleware.js) en la raíz de tu proyecto, al mismo nivel que la carpeta app o pages. No lo coloques dentro de la carpeta app.

Veamos un ejemplo básico de la estructura inicial que captura todas las peticiones y simplemente permite que continúen su curso:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  return NextResponse.next()
}

export const config = {
  matcher: '/about/:path*',
}

Explicación del Matcher

El objeto config con la propiedad matcher te permite especificar exactamente qué rutas deben activar este middleware. Puedes usar rutas exactas, comodines o expresiones regulares avanzadas.

Caso Práctico 1: Autenticación y Protección de Rutas 🔒

Uno de los usos más comunes del middleware es verificar si un usuario cuenta con una cookie de sesión válida antes de permitirle acceder a un panel de administración.

Imagina que tenemos una ruta /dashboard que solo debe ser accesible para usuarios autenticados. Si no existe la cookie de sesión, redirigiremos al usuario a la página de inicio de sesión.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const sessionCookie = request.cookies.get('session_token')

  if (!sessionCookie) {
    const loginUrl = new URL('/login', request.url)
    loginUrl.searchParams.set('from', request.nextUrl.pathname)
    return NextResponse.redirect(loginUrl)
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/dashboard/:path*',
}

Caso Práctico 2: Redirección Basada en Geolocalización e Idioma 🌍

Next.js facilita la detección de la ubicación geográfica del usuario a través de las cabeceras que inyecta Vercel (o plataformas compatibles con el Edge Runtime). Podemos usar esto para redirigir automáticamente a los usuarios a la versión de su idioma correspondiente.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US'
  const currentPath = request.nextUrl.pathname

  // Si el usuario está en la raíz y es de España, redirigir a /es
  if (currentPath === '/' && country === 'ES') {
    return NextResponse.redirect(new URL('/es', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Modificando Cabeceras y Añadiendo Seguridad HTTP 🛡️

Otra funcionalidad excelente del middleware es la capacidad de modificar las cabeceras de respuesta o solicitud. Esto es muy útil para implementar políticas de seguridad (CSP), añadir identificadores de seguimiento (request IDs) o configurar CORS.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // Añadir cabeceras de seguridad personalizadas
  response.headers.set('X-Frame-Options', 'DENY')
  response.headers.set('X-Content-Type-Options', 'nosniff')
  response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')

  // Añadir un identificador único a cada petición
  const requestId = crypto.randomUUID()
  response.headers.set('X-Request-Id', requestId)

  return response
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
}

Buenas Prácticas y Rendimiento en el Edge 🚀

Para asegurarte de que tu middleware no se convierta en un cuello de botella, sigue estas recomendaciones:

Preguntas Frecuentes (FAQ) 📖

Conclusión y Próximos Pasos 🎉

Has aprendido a implementar un middleware avanzado en Next.js App Router, desde la protección de rutas mediante cookies hasta la inyección de cabeceras de seguridad y redirecciones geográficas. El middleware es una herramienta indispensable para llevar tus aplicaciones web al siguiente nivel de robustez y seguridad.

Para seguir practicando, te sugiero integrar una validación de tokens JWT utilizando la librería jose dentro de tu middleware y experimentar combinando múltiples condiciones de redirección.