Implementación de Middlewares en Next.js para Control de Acceso

Contenido del curso

Conceptos básicos de Next.js 14

Manejo de estilos y estáticos en Next.js 14

Data Fetching en Next.js

Next.js Avanzado

Autenticación y autorización

Inteligencia Artificial

Performance

Frontend Ops

Next.js es parte de tu nuevo stack

57
Next.js: Backend y Frontend con React Server Components
01:25 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:38

Implementación de Middlewares en Next.js para Control de Acceso

Curso de Next.js 14

Clase 49 de 57

Clase 49 / 57

Recursos

¿Qué es un middleware y cómo funciona en XJS?

El mundo del desarrollo backend constantemente busca maneras eficientes de gestionar y procesar peticiones. Uno de los conceptos esenciales en este ámbito es el uso de middlewares. Estos son funciones que se ejecutan antes de que un servicio o recurso sea solicitado y juegan un papel intermedio crucial a lo largo del flujo de las peticiones. En el caso de XJS, los middlewares están diseñados para actuar como una barrera que puede controlar accesos y realizar verificaciones antes de que un cliente reciba la información solicitada.

¿Cómo y dónde se implementa un middleware en XJS?

La implementación de un middleware en XJS es directa. Es necesario crear un archivo middleware.ts que se debe ubicar al mismo nivel que la carpeta app. Este archivo contiene la lógica que se ejecutará en cada solicitud, funcionando incluso como una especie de endpoint. La función contenida en este archivo puede ser sincronizada o asincrónica, y su propósito principal es actuar en cada request.

Por ejemplo, para probar la ejecución de un middleware, puede añadirse un simple console.log que se ejecute en cada solicitud. Esto permite verificar que el middleware está funcionando correctamente al observar mensajes recurrentes en la consola.

Ejemplo de implementación de un middleware

// middleware.ts

import { NextResponse } from 'next/server';

export function middleware(request) {
  console.log('middleware here');
  return NextResponse.next();
}

¿Cómo redireccionar y controlar rutas usando un middleware?

Uno de los usos prácticos de los middlewares es controlar el acceso a ciertas rutas dependiendo del estado del usuario. Por ejemplo, si el usuario ya está logueado, podría querer proteger la ruta de login o signup. Para implementarlo, se puede usar la característica de redirección de XJS.

Implementación de la redirección usando NextResponse

Para realizar un redirect, se utiliza NextResponse.redirect. Además, es crucial gestionar los errores potenciales, como el ciclo de redirección continua que podría generarse si no se aplica un freno o condición adecuada.

// middleware.ts

import { NextResponse } from 'next/server';

export function middleware(request) {
  const accessToken = request.cookies.get('access_token')?.value;

  if (accessToken) {
    return NextResponse.redirect(new URL('/store', request.url));
  }

  return NextResponse.next();
}

¿Cómo limitar la aplicación del middleware a ciertas rutas con matcher?

Para una ejecución controlada y específica del middleware en XJS, se utiliza la propiedad matcher que permite designar en qué rutas se ejecutará el middleware. Comenzando con una exportación de la configuración de tu middleware, se proporciona un arreglo de los paths específicos.

Uso del matcher para especificar rutas

// middleware.ts

export const config = {
  matcher: ['/login', '/signup'],
};

¿Cómo gestionar cookies para verificación de usuarios?

Las cookies son elementos cruciales en la gestión de usuarios logueados. El middleware puede leer las cookies directamente de los headers o con utilidades específicas proporcionadas por el framework. Esto ayuda a determinar si un usuario tiene el permiso necesario para acceder a ciertas rutas.

Ejemplo uso de cookies para verificación

// middleware.ts

import { cookies } from 'next/headers';

export function middleware(request) {
  const cookieStore = cookies(request);
  const accessToken = cookieStore.get('access_token')?.value;

  if (accessToken) {
    return NextResponse.redirect(new URL('/store', request.url));
  }

  return NextResponse.next();
}

A través de estos conceptos y herramientas, puedes asegurar que tu aplicación XJS maneja eficazmente las solicitudes, protegiendo y gestionando accesos de manera eficiente. ¡Sigue aprendiendo e implementando estos potentes conceptos y verás cómo optimizarás tus desarrollos!

Conceptos básicos de Next.js 14

Optimización Web con Next.js: Velocidad y Rendimiento Mejorados

Creación de Proyectos Next.js con TypeScript y App Router

Creación de Tienda Online con NextGIS y Shopify

Rutas Estáticas y Dinámicas en Next.js: Creación y Uso Práctico

Implementación de Layouts en Next.js: Globales y Locales

Navegación Optimizada con Next.js Usando el Componente Link

Rutas Dinámicas y Parámetros en Next.js: Implementación Práctica

Uso de React Server Components en Next.js: Cliente vs Servidor

Arquitectura de Componentes para Landing Page en Next.js

Manejo de estilos y estáticos en Next.js 14

Implementación de CSS Modules en Next.js para Estilizar Componentes

Instalación y Configuración de Sass en Next.js

Estilos Globales con SASS para Temas Oscuros en Aplicaciones Web

Agregar Archivos Estáticos en Next.js: Imágenes y Recursos Internos

Optimización de Imágenes con Next.js: Uso de Next.Image

Optimización y Responsividad con NextImage en Next.js

Optimización de Fuentes de Google en Next.js con Roboto

Estilos Dinámicos en React con Classnames y useState

Data Fetching en Next.js

Creación de Tienda en Shopify para Desarrollo con Next.js

Creación y uso de variables de entorno en Next.js

Consumo de APIs con Shopify y React Server Components

Implementación de Loader en Next.js para Carga de Productos

Route Grouping en Next.js sin crear segmentos

error.tsx para manejar errores en Next.js

Next.js Avanzado

Manejo de Errores y Páginas 404 en Next.js

React Server Components en Next.js: Renderizado y Optimización

Diferencias entre archivos Template y Layout en Next.js

Arquitectura Escalable para Aplicaciones de Software

Creación de APIs con Next.js y Road Handlers

Configuración y Creación de Colecciones en Shopify

Patrones de Fetching en Next.js: Secuencial y Paralelo

Filtrar productos por colección en Shopify

params y searchParams en Next.js

Implementación de la Vista de Producto en TypeScript y React

Gestión de Caché en Next.js: Tipos y Recomendaciones Prácticas

Revalidación de Caché en Next.js: Endpoints por Tag y Path

Redirección en Next.js: Server y Client Components

Creación de un Componente React para Sanitizar HTML

SEO Dinámico y Estático en Next.js para Mejorar Posicionamiento Web

Autenticación y autorización

Implementación de API GraphQL en Shopify para Autenticación Segura

Uso de Server Actions en Next.js para Formularios React

Implementación de Signup con GraphQL y Shopify

Implementación de Cookies de Acceso en Shopify con Next.js

Implementación de Flujo de Login con Tokens y Cookies

Validación de Access Tokens en Next.js con GraphQL y Cookies

Implementación de Carrito de Compras con React Icons

Manejo de estado global con Sustant en Next.js 13

Implementación de Carrito de Compras en JavaScript y CSS

Checkout de Shopify sin errores de hidratación

Implementación de Middlewares en Next.js para Control de Acceso

Inteligencia Artificial

Implementación de Chatbots con Next.js y Vercel AI SDK

Creación de un Chatbot de Ventas con Personalidad y Contexto

Performance

Implementación de Parallel Routing en Next.js para Cargas Independientes

Analiza tu bundle en Next.js con Bundle Analyzer

Frontend Ops

"Implementación del Edge Runtime en Next.js"

Despliegue de Aplicaciones NxJS en Vercel

Arquitectura de Proyectos Next.js para Entornos Empresariales

Next.js es parte de tu nuevo stack

Next.js: Backend y Frontend con React Server Components

Implementación de Middlewares en Next.js para Control de Acceso