astrobench · play with code
Step
9/11

Static paths, properly

Pull back the curtain on the function that generates those pages.

Last page we waved a hand at the function that "tells Astro about the astronauts". Time to actually look at it.

 

getStaticPaths is an export ed function you put in a [brackets].astro file. Astro calls it once at build time and uses what it returns to decide which URLs exist.

 

Each entry in the returned array becomes one page. The shape is always the same:

src/pages/crew/[name].astro — the shape read-only
1
2
3
4
5
6
7
8
---
export async function getStaticPaths() {
  return [
    { params: { name: "mae" }, props: { mission: "Endeavour" } },
    { params: { name: "ovidiu" }, props: { mission: "Apollo 42" } },
  ];
}
---

params fills the brackets in the file name. Here it's name , so params.name = "mae" means /crew/mae .

 

props is the data each page receives. It lands on Astro.props in the template — same shape as in lesson 4, just delivered route-by-route.

 

Below: the full file, working. The sandbox renders whichever astronaut is first in your array. Swap the order, add new names, watch the preview follow.

src/pages/crew/[name].astro — getStaticPaths + template, together live

In a real build, Astro would write out all three HTML files — /crew/mae , /crew/ovidiu , /crew/sergei . Astrobench shows one at a time , but the function is doing the same work.

 

When astronauts come and go, you don't edit the template — you edit the array. The router does the rest.

— page 9 —
in the binder open binder →
saved a moment ago
progress 82%
earn +100 XP