🗂️ Anidación de rutas y segmentación dinámica

11 - 🗂️ Anidación de rutas y segmentación dinámica

Aprende cómo funciona el sistema de rutas anidadas y dinámicas en Next.js con el App Router. Descubre cómo crear rutas jerárquicas, parámetros dinámicos y páginas personalizadas.

---

📁 ¿Qué son las rutas anidadas?

En Next.js, las rutas se generan automáticamente según la estructura de carpetas dentro de app/. Las rutas anidadas te permiten organizar las páginas dentro de subcarpetas para reflejar una jerarquía de navegación.

app/
 ├─ page.js
 ├─ blog/
 │   ├─ page.js
 │   └─ comentarios/
 │       └─ page.js
 └─ contacto/
     └─ page.js
      

Esto genera las siguientes rutas automáticas:

• / → Página principal
• /blog → Página del blog
• /blog/comentarios → Página anidada dentro del blog
• /contacto → Página de contacto

---

🧩 Ejemplo práctico — Rutas anidadas

Supongamos que tenemos un blog con una sección de artículos y comentarios. Podemos crear carpetas y archivos como sigue:

// app/blog/page.js
export default function Blog() {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">📰 Blog Principal</h1>
      <p>Bienvenido al blog del curso de Next.js</p>
    </main>
  );
}

// app/blog/comentarios/page.js
export default function Comentarios() {
  return (
    <main className="p-6 bg-gray-100 rounded">
      <h2 className="text-xl font-bold text-blue-700">💬 Comentarios</h2>
      <p>Aquí verás los comentarios de los artículos.</p>
    </main>
  );
}
      

🧩 Resultado visual:

Ruta /blog: 📰 Blog Principal

Ruta /blog/comentarios: 💬 Comentarios

Cada carpeta representa un nivel de anidación.

---

🔢 Segmentación dinámica de rutas

Las rutas dinámicas permiten crear páginas basadas en parámetros. Para definir una ruta dinámica, usa corchetes en el nombre de la carpeta o archivo:

app/
 └─ blog/
     └─ [id]/
         └─ page.js
      

Esto genera rutas como:

• /blog/1
• /blog/2
• /blog/3

// app/blog/[id]/page.js
export default function Articulo({ params }) {
  return (
    <main className="p-6">
      <h1 className="text-2xl font-bold">📝 Artículo {params.id}</h1>
      <p>Este es el contenido del artículo con ID {params.id}.</p>
    </main>
  );
}
      

🧩 Resultado visual:

/blog/1 → 📝 Artículo 1

/blog/2 → 📝 Artículo 2

/blog/3 → 📝 Artículo 3

💡 Consejo: los params en Next.js son un objeto con los valores dinámicos de la URL.

---

📂 Rutas dinámicas anidadas

Puedes combinar anidación y segmentación dinámica para construir estructuras más avanzadas. Por ejemplo, un blog con artículos y comentarios:

app/
 └─ blog/
     └─ [id]/
         ├─ page.js
         └─ comentarios/
             └─ page.js
      

Ejemplo de código:

// app/blog/[id]/comentarios/page.js
export default function ComentariosArticulo({ params }) {
  return (
    <main className="p-6 bg-gray-50">
      <h2 className="text-xl font-bold text-blue-700">💬 Comentarios del artículo {params.id}</h2>
      <p>Aquí se muestran los comentarios del post número {params.id}.</p>
    </main>
  );
}
      

🧩 Resultado visual:

/blog/1/comentarios → 💬 Comentarios del artículo 1

/blog/2/comentarios → 💬 Comentarios del artículo 2

La estructura de carpetas define automáticamente las rutas.

---

📘 Resumen

• 📁 Las carpetas en app/ definen rutas automáticamente.
• 📂 Puedes anidar carpetas para crear rutas jerárquicas.
• 🔢 Usa corchetes [param] para definir segmentos dinámicos.
• 💬 Puedes combinar rutas anidadas con parámetros dinámicos.

✅ Con esto puedes crear estructuras de navegación complejas sin necesidad de configuraciones manuales.

← Volver al índice