Child pages with getStaticPaths() in Astro

How to create a child page with getStaticPaths():

Full code

1. What is getStaticPaths() ?

• Here is the description of getStaticPaths():
• Because Astro is a static site builder it needs to know how to generate all the paths that are found in the app, to do this you need to export a getStaticPaths() function

2. What to write in getStaticPaths() ?

• An array with params. This depends on what pages are you trying to export, but they will need to match with the params that are going to be sent via navigation

export async function getStaticPaths() {
      return [{
        params: { child: 2 }
      }];
}

3. Create an empty Astro project .

• npm create astro@latest

4. Add child page .

• Nagivate to your pages folder, should be under project/src/pages
• Create a new file called [child].astro, should be at the same level as index.astro
• Add the following code:

---
export function getStaticPaths() {
  return [{
      params: { child: 1 },
  }];
}
const { child } = Astro.params;
---
<p> child page {child}</p>

• {params: { child: 1 }} will create a single page similar to https://somesite.com/1
• adding a new array object like: {params: { child: 2 }} will create 2 pages https://somesite.com/1 and https://somesite.com/2

Is that easy.