Dynamic Routes for Individual Posts

Module 4 · Section 6 of 9

Dynamic Routes for Individual Posts

Astro needs to know which pages to generate at build time. For dynamic content, you use getStaticPaths:

Create src/pages/blog/[slug].astro:

---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

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

<BaseLayout title={post.data.title} description={post.data.description}>
  <article class="container">
    <h1>{post.data.title}</h1>
    <Content />
  </article>
</BaseLayout>

getStaticPaths runs at build time and tells Astro every URL this page needs to generate. For a collection of ten posts, it generates ten pages.