Hablemos de enrutamiento en Nextjs. Hoy hablaremos sobre uno de los middleware más poderosos. El middleware en Nextjs ofrece una forma potente y flexible de interceptar solicitudes del servidor y controlar el flujo de solicitudes (redirecciones, reescritura de URL) y mejorar globalmente funciones como autenticación, encabezados y persistencia de cookies.

Creando software intermedio

Creemos la aplicación Middleware Next.js. En primer lugar, crearemos un nuevo archivo para middleware como middleware.js o middleware.ts, en la carpeta src. El middleware en Next.js debe permitirle un control preciso sobre dónde estará activo (es decir, configuración de comparación personalizada o uso de funciones isXXX)

Redireccionando

Usando la redirección como ejemplo, imaginemos un escenario en el que navegar a /profile debería redirigir al usuario a la página de inicio. Con el enfoque de configuración de comparación personalizada, podemos lograr esto importando los tipos necesarios, definiendo una función de middleware y especificando la configuración de comparación:

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

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

En este ejemplo, la función de middleware comprueba si la ruta URL de solicitud es /profile y redirige al usuario a la página de inicio.

Para el enfoque de declaración condicional, podemos modificar el código de la siguiente manera:

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

En este caso, el middleware comprueba la ruta URL de solicitud y redirige al usuario a la ruta /hello si la ruta es /profile.

El middleware en Next.js va más allá de simplemente manejar redirecciones. También permite la reescritura de URL, lo que puede resultar útil para la compatibilidad con URL heredadas o la optimización SEO. Al cambiar la redirección para reescribir en los ejemplos anteriores, la URL en el navegador seguirá siendo la misma (/perfil), pero el contenido de la respuesta cambiará al contenido de la ruta /hello.

Usando cookies

Por último, exploremos el uso de cookies y encabezados en el middleware. Podemos modificar nuestro middleware para manejar las preferencias del usuario para los temas y agregar un encabezado personalizado para todas las respuestas:

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

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

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

En este ejemplo, primero verificamos si el usuario tiene una preferencia de tema almacenada en una cookie. De lo contrario, configuramos el tema en "oscuro" agregando una cookie. Luego, agregamos un encabezado personalizado a la respuesta, que puede resultar útil para pasar información adicional o con fines de depuración.

Como puede ver, el middleware en Next.js es una herramienta poderosa que le permite controlar e interceptar de manera efectiva el ciclo de solicitud-respuesta, permitiendo redirecciones, reescrituras de URL y la manipulación de encabezados y cookies. Al dominar el middleware, puede mejorar la experiencia de enrutamiento en sus aplicaciones Next.js y crear experiencias de usuario más sólidas y personalizables.

"El middleware en Next.js es una característica poderosa que ofrece una forma sólida de interceptar y controlar el flujo de solicitudes y respuestas dentro de sus aplicaciones". - Documentación de Next.js

Conclusión

En resumen, hemos aprendido cómo definir middleware en Next.js, explorar los dos enfoques principales (configuración de comparación personalizada y declaraciones condicionales) y aplicar middleware para manejar redirecciones, reescrituras de URL y la administración de cookies y encabezados. . Este conocimiento le ayudará a llevar sus aplicaciones Next.js al siguiente nivel aprovechando la flexibilidad y el control que proporciona el middleware.