Guía Avanzada: Cómo Proteger Rutas en Next.js (2025)

Proteger rutas en Next.js es fundamental para cualquier aplicación moderna. A continuación, te presento las mejores prácticas actualizadas, ejemplos y consideraciones de seguridad para proteger tanto páginas como APIs y datos sensibles.

1. ¿Por qué es importante proteger rutas?

Evitar acceso no autorizado a dashboards, paneles de usuario, áreas de administración, etc.
Proteger datos sensibles y operaciones críticas (pagos, datos personales, etc).
Cumplir con normativas de privacidad y buenas prácticas de seguridad web.

2. Estrategias Principales

A. Middleware para protección global

El Middleware de Next.js permite interceptar cualquier request antes de llegar a la página o API, ideal para proteger rutas privadas.

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('session-token')?.value;

  // Rutas públicas (login, registro, home, etc)
  const publicPaths = ['/', '/login', '/register'];
  if (publicPaths.includes(request.nextUrl.pathname)) {
    return NextResponse.next();
  }

  // Si no está autenticado, redirige a login
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  // Aquí podrías agregar lógica para roles, expiración de sesión, etc.
  return NextResponse.next();
}

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

Tips:

Usa matcher para excluir rutas públicas o recursos estáticos.
No pongas toda la lógica de seguridad solo en el middleware: valida también en el backend y en los Server Actions.

B. Protección en Server Components y Server Actions

Utiliza la función redirect de Next.js para proteger páginas desde componentes del lado del servidor:

// app/dashboard/page.tsx
import { redirect } from 'next/navigation';
import { getSession } from '@/lib/auth';

export default async function DashboardPage() {
  const session = await getSession();
  if (!session) {
    redirect('/login');
  }
  // ...contenido seguro
}

Ventajas:

Seguridad adicional: incluso si alguien burla el middleware, no podrá acceder sin sesión válida.
Permite lógica avanzada: roles, permisos, etc.

C. Protección de APIs (Route Handlers)

Las rutas en /api o los nuevos Route Handlers también deben validar la autenticación y autorización:

// app/api/secure-data/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { verifyToken } from '@/lib/auth';

export async function GET(request: NextRequest) {
  const token = request.cookies.get('session-token')?.value;
  if (!token || !(await verifyToken(token))) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
  // ... lógica segura
  return NextResponse.json({ data: 'Información protegida' });
}

3. Buenas Prácticas y Consideraciones

Nunca confíes solo en el frontend: valida siempre en el servidor.
Evita fugas de datos: maneja errores correctamente, no expongas mensajes sensibles en producción.
Gestiona la sesión de forma segura: usa cookies HttpOnly, encriptadas y con expiración.
Segmenta por roles y permisos tanto en middleware como en server actions y APIs.
Audita tu código: revisa rutas, permisos y posibles bypass.