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

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:24

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

Curso de Next.js 14

Clase 7 de 57

Clase 7 / 57

Recursos

Next.js es una herramienta increíblemente poderosa para la creación de aplicaciones web, y su sistema de rutas dinámicas es una de las características que lo hacen destacar. Aprender a manejar las rutas dinámicas en Next.js amplía enormemente las posibilidades de lo que podemos construir, por lo que comprender este concepto es esencial para cualquier desarrollador que busque sacar el máximo provecho a esta tecnología. En este artículo, nos adentraremos en la implementación y manejo de las rutas dinámicas más complejas y aprenderemos a trabajar con parámetros de búsqueda en Next.js.

¿Cómo se manejan las rutas dinámicas en Next.js?

Next.js simplifica la creación de rutas dinámicas a través de un sistema inteligente de carpetas y archivos que permite manejar múltiples rutas con facilidad.

Cuando quieres crear una ruta que incluye categorías y subcategorías de productos, tales como /store/tecnología/móviles/iphones/iphone-15/blanco, podrías pensar que necesitas múltiples carpetas y archivos. Sin embargo, Next.js ofrece una solución más sencilla para manejar rutas dinámicas con múltiples segmentos.

¿Cómo crear rutas dinámicas con múltiples segmentos?

Para manejar rutas con varios segmentos en Next.js, se utiliza una notación especial en los archivos de las páginas. En lugar de crear una carpeta para cada segmento de ruta, puedes utilizar los "catch all routes".

Solo necesitas agregar tres puntos (...) antes del nombre del archivo en corchetes. Por ejemplo, [...category].tsx permitirá capturar todos los segmentos de ruta subsecuentes como un array. Este enfoque es particularmente útil cuando el número de segmentos de ruta varía o es indeterminado.

¿Qué son y cómo funcionan los segmentos de ruta opcionales?

En algunas ocasiones, puede ser deseable que una misma página maneje varias rutas distintas, incluyendo la ruta base. Para lograr esto, Next.js proporciona lo que se conoce como "optional catch all routes". Al agregar un doble corchete ([[...slug]]), indicamos que la ruta base y cualquier otra combinación de segmentos deben ser manejados por el mismo componente.

Esto significa que, si no hay segmentos adicionales, el parámetro será undefined, y si hay segmentos adicionales, se recibirán en el array correspondiente.

¿Cómo trabajar con parámetros de búsqueda en las rutas de Next.js?

Los parámetros de búsqueda (search params) son esos valores que agregamos al final de una URL después del signo de interrogación, como ?referrer=twitter. Next.js permite gestionar este tipo de parámetros de forma sencilla.

Para acceder a ellos, puedes usar router.query, donde Next.js automáticamente parsea estos parámetros y los proporciona como un objeto. Es importante recordar que estos parámetros pueden no estar presentes, por lo que se debe manejar su posible ausencia de manera adecuada, especialmente si estás utilizando TypeScript.

¿Cuál es la importancia de nombrar correctamente las carpetas y archivos en Next.js?

Un tip profesional que nunca debe olvidarse es el de nombrar de manera adecuada las carpetas y archivos en tu proyecto Next.js. Al trabajar con rutas dinámicas, es esencial que los nombres reflejen con precisión la naturaleza de los datos que están siendo gestionados. Esto no solo mejora la claridad del código, sino que también facilita el mantenimiento y la escalabilidad de la aplicación.

Aprovecha al máximo las posibilidades que Next.js te ofrece para manejar rutas dinámicas de manera eficiente y sofisticada. Recuerda, cada nueva habilidad que adquieres es una oportunidad para crear algo impresionante. ¡Ánimo y sigue explorando las profundidades de Next.js!

Luis Herrera

Hace 2 años

Otra opción que podemos manejar para las rutas:

Vamos a descomponer el código y explicar cada parte: Object.keys(searchParams || {}).map((key) => (...))

Este código utiliza dos métodos de JavaScript: Object.keys() y map().

Object.keys()

Object.keys()**** es un método que devuelve un arreglo de strings que representan las claves (o propiedades) de un objeto. En este caso, estamos pasando searchParams como parámetro.

searchParams es un objeto que contiene pares clave-valor, donde las claves son strings y los valores también son strings. Por ejemplo: { "color": "red", "size": "large", "material": "cotton" }

Cuando se llama a**** Object.keys(searchParams), se devuelve un arreglo con las claves del objeto: ["color", "size", "material"]

|| {} La expresión searchParams || {}**** es un truco para asegurarse de que searchParams no sea null o undefined.

Si searchParams es null o undefined, el operador || devuelve un objeto vacío {} en su lugar. Esto evita que se produzca un error al intentar llamar a Object.keys() en un objeto nulo o undefined. map((key) => (...))

Una vez que se tiene el arreglo de claves, se utiliza el método map() para transformar cada clave en un elemento <li>.

La función de callback de map()**** recibe cada clave como parámetro key. Dentro de la función, se devuelve un elemento <li> con la clave como texto y el valor asociado a esa clave en searchParams.

<li key={key}>{key}:

{searchParams?.[key]}</li> Este es el elemento <li> que se devuelve para cada clave. Hay dos partes importantes:

key={key}: se asigna la clave como valor de la propiedad key del elemento <li>. Esto es importante para que React pueda identificar de forma única cada elemento de la lista.
{key}: {searchParams?.[key]}: se muestra el texto de la clave y su valor asociado en searchParams. La sintaxis searchParams?.[key]**** es llamada "optional chaining" y se utiliza para evitar errores si searchParams es**** null o undefined. Si searchParams es null o undefined, el valor de searchParams?.[key] será undefined.

En resumen, este código itera sobre las claves de searchParams, crea un elemento <li> para cada clave y muestra el texto de la clave y su valor asociado.

Comentarios (15)15 comentarios

Gerardo Castillo

Hace 3 años

Jean Michael Courtois

José Luis Jiménez

Daniel Loyo

Eulises Brazón

Israel Castro

Xavier Flores

Jefred Bedoya

Hace 2 meses

Brian Sánchez Izquierdo

Hace un año

Sergio Ivan Alvarez Uribe

Abel Naharro

Daniel Gonzalez Herrera

Guido Espinoza Correa

Erick Eduardo Acosta Parra

Piero Anthony Liberato Susanibar

Franco Daniel Carrara

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

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