Pages and routing
Generate static dynamic routes
Return params and optional props from getStaticPaths so Astro can build one page for each data item.
8 minute lesson
A static dynamic route must tell Astro every URL to build.
---
const posts = [
{ slug: 'hello-astro', title: 'Hello Astro' },
{ slug: 'islands', title: 'Understanding islands' }
]
export function getStaticPaths() {
return posts.map(post => ({
params: { slug: post.slug },
props: { post }
}))
}
const { post } = Astro.props
---
<h1>{post.title}</h1>
Each params object identifies a public route. props carries the data directly into that page render.
During a static build, Astro runs getStaticPaths() once, then renders the page for every returned entry. The browser never calls this function.
Parameter values must be strings, numbers converted for the route, or undefined where a rest parameter allows it. Keep the URL field stable and separate from a display title.
Returning no entry for a slug means no static page exists for it. A link to that URL becomes a production 404.
Avoid fetching the same data again inside every page render when it can travel through props from the path generation step.
Add a third post, build, and inspect the three generated routes. Then remove one entry and confirm its file disappears.
Lesson completed