Cuando desarrollamos aplicaciones web con Next.js, es habitual necesitar páginas cuyo contenido cambie dependiendo de un identificador. Por ejemplo, una tienda puede tener una página diferente para cada producto o un blog puede utilizar una URL como /blog/como-aprender-react. Para estos casos, Next.js ofrece las rutas dinámicas.
¿Qué es una ruta dinámica?
Una ruta dinámica permite utilizar una parte variable dentro de la URL. En Next.js, esto se consigue creando una carpeta cuyo nombre está entre corchetes.
Por ejemplo:
app/
├── page.js
└── productos/
└── [id]/
└── page.js
Con esta estructura, podemos acceder a URLs como:
/productos/1
/productos/25
/productos/100
El valor id será diferente dependiendo de la URL que visite el usuario.
Obtener el parámetro dinámico
Dentro de page.js, podemos recibir los parámetros de la ruta:
export default async function Producto({ params }) {
const { id } = await params;
return (
<main>
<h1>Producto: {id}</h1>
</main>
);
}
Si el usuario visita /productos/25, el valor de id será 25.
Esto resulta especialmente útil cuando necesitamos consultar una API o una base de datos utilizando ese identificador.
Rutas dinámicas con datos
Podemos utilizar el parámetro para obtener información real:
export default async function Producto({ params }) {
const { id } = await params;
const respuesta = await fetch(
`https://api.ejemplo.com/productos/${id}`
);
const producto = await respuesta.json();
return (
<main>
<h1>{producto.nombre}</h1>
<p>{producto.descripcion}</p>
<strong>${producto.precio}</strong>
</main>
);
}
De esta manera, una única página puede mostrar cientos o miles de productos diferentes.
Rutas dinámicas con slug
No siempre necesitamos utilizar números. En blogs es común utilizar un slug:
app/
└── blog/
└── [slug]/
└── page.js
Así podemos tener URLs como:
/blog/aprender-nextjs
/blog/rutas-dinamicas
/blog/curso-react
Y acceder al valor mediante:
export default async function BlogPost({ params }) {
const { slug } = await params;
return <h1>Artículo: {slug}</h1>;
}
Rutas dinámicas múltiples
Next.js también permite crear segmentos dinámicos que capturan varios niveles de una URL utilizando [...slug].
Por ejemplo:
app/docs/[...slug]/page.js
Puede responder a:
/docs/react
/docs/react/hooks
/docs/react/hooks/useeffect
El valor recibido será un array con cada segmento de la URL.
¿Cuándo utilizarlas?
Las rutas dinámicas son fundamentales para aplicaciones como:
- Tiendas online.
- Blogs y portales de noticias.
- Catálogos de productos.
- Perfiles de usuarios.
- Documentación.
- Plataformas educativas.
La gran ventaja es que no necesitamos crear manualmente una página para cada elemento. Una sola estructura puede manejar múltiples URLs y obtener el contenido correspondiente desde una API o base de datos.
Dominar las rutas dinámicas es un paso importante para aprovechar el App Router de Next.js y construir aplicaciones más escalables, organizadas y fáciles de mantener.
