Get Static Paths not finding pages

[grizzled dagger]

Hola, estoy intentando hacer un página con enrutamiento estático pero no me encuentra los archivos. ¿Qué está mal?

// pages/[lang]/[page].astro
---
import Layout from '@layouts/Layout.astro'
import type { GetStaticPaths } from 'astro'
import { type CollectionEntry, getCollection, render } from 'astro:content'

export const getStaticPaths = (async () => {
  const wiki = await getCollection('wiki')
  return wiki.map(page => {
    return {
      params: { page: page.id, lang: page.id.split('/')[0] },
      props: { page }
    }
  })
}) satisfies GetStaticPaths

interface Props {
  page: CollectionEntry<'wiki'>
}

const { page } = Astro.props
const { Content } = await render(page)
---

<Layout title={page.data.title}>
  <Content />
</Layout>

[steady ruin]

Hi @grizzled dagger. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hola! El problema está en cómo estás construyendo el parámetro page. Cuando el id de una entrada de colección contiene el carácter / (por ejemplo, en/my-page), estás pasando ese valor completo como el parámetro page, pero tu ruta dinámica es [page].astro (un parámetro simple), que no puede manejar rutas con múltiples segmentos.

Para solucionar esto, necesitas usar un rest parameter ([...page]) en el nombre del archivo. [rest parameters]

Además, el parámetro lang ya está incluido dentro del id (ej. en/my-page), así que debes separarlo correctamente para que no se duplique en la URL.

Aquí tienes el código corregido:

1. Renombra el archivo a pages/[lang]/[...page].astro

2. Ajusta getStaticPaths:

// pages/[lang]/[...page].astro
---
import Layout from '@layouts/Layout.astro'
import type { GetStaticPaths } from 'astro'
import { type CollectionEntry, getCollection, render } from 'astro:content'

export const getStaticPaths = (async () => {
  const wiki = await getCollection('wiki')
  return wiki.map(page => {
    const [lang, ...slug] = page.id.split('/')
    return {
      params: { lang, page: slug.join('/') || undefined },
      props: { page }
    }
  })
}) satisfies GetStaticPaths

interface Props {
  page: CollectionEntry<'wiki'>
}

const { page } = Astro.props
const { Content } = await render(page)
---

<Layout title={page.data.title}>
  <Content />
</Layout>

Los puntos clave del cambio son:

• [...page] en el nombre del archivo permite que el parámetro page coincida con múltiples segmentos de ruta. [generating routes]
• Se separa el lang del resto del slug usando destructuring: const [lang, ...slug] = page.id.split('/').
• Se usa slug.join('/') || undefined para que si no hay más segmentos, el rest parameter sea undefined (lo que genera la ruta raíz del segmento). [rest parameters]

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: