0Pricing
Next.js 15 Fullstack Web Apps · Lección

Rutas dinámicas y segmentos catch-all

Cree rutas flexibles que se adapten al contenido dinámico mediante segmentos dinámicos y rutas catch-all.

Rutas dinámicas y segmentos catch-all es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Flexible Routing in Next.js

Welcome to dynamic routing in Next.js! Modern web applications often need flexible URLs for content like blog posts, product details, or user profiles.

Instead of creating a separate page for each item, dynamic routes let you use a single page template to handle many different URLs based on their path.

Creating Dynamic Segments

In Next.js, you create a dynamic route by enclosing a folder name in square brackets, like [slug].

This [slug] segment acts as a placeholder. Whatever value is in that part of the URL will be captured and made available to your page component.

  • Example: app/blog/[slug]/page.js
  • This will match URLs like /blog/hello-world or /blog/nextjs-tips.

Accessing Dynamic Parameters

When a dynamic route is matched, the value of the dynamic segment (e.g., slug) is passed to your page component as a property of the params object.

By default, Next.js App Router pages are React Server Components, which receive params as a prop.

// File: app/blog/[slug]/page.js

export default function BlogPostPage({ params }) {
  const { slug } = params; // If URL is /blog/my-post, slug will be 'my-post'

  return (
    <main>
      <h1>Blog Post: {decodeURIComponent(slug)}</h1>
      <p>This content is for the post identified by '{decodeURIComponent(slug)}'.</p>
    </main>
  );
}

Introducing Catch-all Segments

What if you need to match URLs with an unknown number of segments? For example, a documentation site where paths can be deeply nested (e.g., /docs/getting-started/installation).

This is where catch-all segments come in. They capture all subsequent path segments into an array.

Creating Catch-all Routes

To create a catch-all route, use three dots followed by the segment name inside square brackets: [...slug].

This will match any path that starts with the parent folder and capture all parts after it into an array.

  • Example: app/docs/[...slug]/page.js
  • Matches: /docs/a, /docs/a/b, /docs/a/b/c.
  • slug will be an array: ['a'], ['a', 'b'], ['a', 'b', 'c'].

Accessing Catch-all Parameters

Similar to dynamic segments, catch-all parameters are available via the params object. However, the value for a catch-all segment is always an array of strings.

Let's see an example of displaying the captured path segments from a URL like /docs/guide/setup/nextjs.

// File: app/docs/[...slug]/page.js

export default function DocsPage({ params }) {
  const { slug } = params; // If URL is /docs/intro/setup, slug is ['intro', 'setup']

  return (
    <main>
      <h2>Documentation Path: /{slug.join('/')}</h2>
      <p>Segments found: {slug.map(s => `<code>${s}</code>`).join(', ')}</p>
    </main>
  );
}

Optional Catch-all Segments

What if you want a catch-all route to also match the base path? For example, you want /docs to show an index page, but /docs/intro to show a specific guide.

You can make a catch-all segment optional by wrapping it in an extra set of square brackets: [[...slug]].

  • Example: app/docs/[[...slug]]/page.js
  • Matches: /docs and /docs/a/b.

Optional Catch-all Example

When using [[...slug]], the slug parameter will be an array of strings for sub-paths. However, it will be undefined if only the base path is matched (e.g., /docs).

You'll need to handle the undefined case in your component to show default content.

// File: app/docs/[[...slug]]/page.js

export default function OptionalDocsPage({ params }) {
  const { slug } = params; // If URL is /docs, slug is undefined
                           // If URL is /docs/intro, slug is ['intro']

  const pathDisplay = slug ? slug.join('/') : 'Home Index';

  return (
    <main>
      <h2>Docs: {pathDisplay}</h2>
      <p>This page handles both the base path and any sub-paths.</p>
    </main>
  );
}

Quick Check on Routing

Which of the following statements about Next.js dynamic and catch-all routes are TRUE?

Recap: Dynamic & Catch-all Routes

You've mastered how to make your Next.js application's routing incredibly flexible!

  • Dynamic Segments ([slug]) allow a single page to handle many specific URLs, receiving a string parameter.
  • Catch-all Segments ([...slug]) capture multiple path segments into an array, useful for nested structures.
  • Optional Catch-all Segments ([[...slug]]) extend catch-alls to also match the base path, with the parameter being undefined for the base path.

These powerful patterns are fundamental for building scalable and content-rich applications in Next.js.

Preguntas frecuentes

¿La lección «Rutas dinámicas y segmentos catch-all» es gratis?

Sí — el texto completo de «Rutas dinámicas y segmentos catch-all» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Rutas dinámicas y segmentos catch-all»?

Cree rutas flexibles que se adapten al contenido dinámico mediante segmentos dinámicos y rutas catch-all. Practicas Next.js 15 Fullstack Web Apps con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Next.js 15 Fullstack Web Apps?

No se requiere experiencia previa. Next.js 15 Fullstack Web Apps en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Rutas dinámicas y segmentos catch-all»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack Web Apps?

Sí. Cada lección de Next.js 15 Fullstack Web Apps incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Rutas dinámicas y segmentos catch-all
  2. Layouts anidados y grupos de rutas
  3. Rutas paralelas y de intercepción
  4. Convenciones para las interfaces de carga y error
← Volver a Next.js 15 Fullstack Web Apps