Protección de rutas mediante middleware
Utilice el middleware de Next.js y callbacks de autenticación para redirigir a usuarios no autenticados en el edge.
Protección de rutas mediante middleware es una lección gratuita de React Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es el middleware de Next.js?
El middleware se ejecuta en el edge antes de que una solicitud llegue a una ruta. Puede redirigir, reescribir o añadir encabezados, por lo que es ideal para realizar comprobaciones de autenticación sin cargar componentes de servidor.
Crear middleware
Cree middleware.ts en la raíz del proyecto. Exporte una función middleware y un matcher config.
// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const token = request.cookies.get('auth-token')?.value;
if (!token) {
return NextResponse.redirect(new URL('/login', request.url));
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Patrones de matcher
La matriz matcher utiliza patrones de ruta. Use :path* para cualquier subruta o excluya rutas mediante una expresión de anticipación negativa.
export const config = {
matcher: [
// Protect all routes except public ones:
'/((?!login|register|_next|api/auth|favicon.ico).*)',
],
};Integración del middleware de Auth.js
Auth.js (v5) proporciona una exportación de middleware lista para usar. Vuelva a exportarla desde middleware.ts con un matcher.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/settings/:path*'],
};Comprobar el JWT en el middleware
Verifique un token JWT en el middleware mediante la biblioteca jose (compatible con edge; no utiliza el módulo crypto de Node.js).
import { jwtVerify } from 'jose';
export async function middleware(request: NextRequest) {
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));
try {
await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
return NextResponse.next();
} catch {
return NextResponse.redirect(new URL('/login', request.url));
}
}Middleware basado en roles
Lea el rol del usuario desde el token y redirija a una página de acceso no autorizado si el rol no es suficiente.
const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
return NextResponse.redirect(new URL('/unauthorized', request.url));
}Pasar datos a los controladores de ruta
Establezca un encabezado de solicitud dentro del middleware para pasar los datos del usuario descodificados a los componentes de servidor sin volver a obtener el token.
const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;
// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');Reescribir URL en el middleware
Utilice NextResponse.rewrite() para servir una página diferente para una URL sin cambiar la barra de direcciones del navegador; resulta útil para pruebas A/B o indicadores de funcionalidades.
const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
return NextResponse.rewrite(new URL('/home-v2', request.url));
}Geolocalización e IP en el middleware
Acceda a los datos geográficos de la solicitud y a la IP desde el objeto NextRequest para realizar redirecciones o bloqueos basados en la región.
const country = request.geo?.country ?? 'US';
if (country === 'XX') {
return NextResponse.redirect(new URL('/region-blocked', request.url));
}Rendimiento del middleware
El middleware se ejecuta en cada solicitud coincidente en el edge. Manténgalo ligero: evite cálculos pesados o importaciones grandes. Utilice únicamente bibliotecas compatibles con edge.
Combinar rutas autenticadas y públicas
Un patrón habitual consiste en protegerlo todo excepto una lista de rutas públicas permitidas que se comprueba antes de la lógica de autenticación.
const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();
// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));Comprobación rápida
¿Qué biblioteca debe utilizar para verificar JWT dentro del middleware de Next.js en lugar del módulo crypto de Node?
Resumen
Cree middleware.ts en la raíz del proyecto con una configuración matcher. Compruebe los tokens de autenticación con jose, compatible con edge, redirija a los usuarios no autenticados y pase los datos descodificados a los componentes de servidor mediante encabezados de respuesta. Mantenga el middleware rápido y con pocas dependencias.
Preguntas frecuentes
¿La lección «Protección de rutas mediante middleware» es gratis?
Sí — el texto completo de «Protección de rutas mediante middleware» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Protección de rutas mediante middleware»?
Utilice el middleware de Next.js y callbacks de autenticación para redirigir a usuarios no autenticados en el edge. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Protección de rutas mediante middleware»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Auth.js en Next.js App Router
- Gestión de sesiones y hook useSession
- Proveedor de credenciales e inicio de sesión personalizado
- Protección de rutas mediante middleware