astrobench · play with code
Step
8/11

Profile pages

Every astronaut wants their own page. Astro can do that with one file.

Six astronauts. Six profile pages — same shape , different person. Writing six near-identical files would be a bad day.

 

Astro's file-based router has a trick: square brackets in the filename. [name].astro doesn't mean "a file literally called [name]". It means: name is a placeholder. Fill it in.

 

One file at src/pages/crew/[name].astro generates as many URLs as you want: /crew/mae , /crew/ovidiu , /crew/sergei … Same template, different output.

Below is the template half of that file — what gets rendered for each URL. The bracketed value ( name ) shows up on Astro.props , the same way props arrived in lesson 4.

 

The sandbox is pretending we visited /crew/mae , so it feeds name: "mae", mission: "Endeavour" in for you. Tweak the template — change wording, restyle the link, add personal detail.

src/pages/crew/[name].astro (template) — rendered for /crew/mae live

The other half of the file — the part that says "here are all the names to fill in" — is its own concept. That's the next lesson. For now, just trust that Astro knows about the three astronauts and built three pages.

— page 8 —
in the binder open binder →
saved a moment ago
progress 73%
earn +80 XP