Archivo middleware en Next.js

Tiempo de lectura: < 1 minuto

Hoy voy a explicar y proporcionar un ejemplo de middleware en Next.js

Un middleware en Next.js es una función que se ejecuta antes de que una solicitud llegue a tu ruta o API de Next.js. Puedes usar middleware para manejar y manipular solicitudes entrantes.

Aquí están algunas cosas que puedes hacer con middleware en Next.js:

1. Manejo de cookies: Puedes leer, modificar o establecer cookies en las solicitudes entrantes.
2. Redirecciones: Puedes redirigir a los usuarios a diferentes rutas basándote en ciertas condiciones.
3. Autenticación: Puedes verificar si un usuario está autenticado y, si no lo está, redirigirlo a una página de inicio de sesión.
4. Modificación de solicitudes: Puedes modificar las solicitudes entrantes, por ejemplo, añadiendo encabezados o cambiando el método de la solicitud.

Un middleware en Next.js se define como una función exportada (por defecto o con nombre) en un archivo en la carpeta pages/_middleware o si quieres que afecte a toda la app entera, en raíz de src llamándolo middleware. Esta función recibe un objeto NextRequest y debe devolver un objeto NextResponse o void.

Ejemplo de middleware

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

export function middleware(req: NextRequest) {
  // Redirige a los usuarios no autenticados a la página de inicio de sesión
  if (!req.cookies.get('auth')) {
    return NextResponse.redirect('/login')
  }
}

Este middleware verifica si existe una cookie de autenticación en la solicitud. Si no existe, redirige al usuario a la página de inicio de sesión.