Dynamic Pages with getStaticPaths

The Core Concept: From Data to Pages

The process of generating pages dynamically in a static site generator like Astro involves two key parts:

1. A Dynamic Route Template: Instead of a file with a fixed name like about.astro, you create a file with a placeholder in its name, such as [slug].astro. This file acts as a template for all pages of a certain type (e.g., all blog posts). The [slug] part is a parameter that will be filled in from your data.
2. A Data-to-Path Mapper: You need a way to tell Astro, "For every item in my 'blog' collection, create a page using the template and use the post's slug for the URL." This is exactly what the getStaticPaths function does.

getStaticPaths is a special, required export for dynamic routes in Astro's default static mode. It runs at build time, fetches your data, and returns an array of all the pages that need to be generated.

How getStaticPaths Works

To understand the mechanics, the official Astro documentation provides the most direct and authoritative explanation.

As you've just read, getStaticPaths must return an array of objects. Each object in this array corresponds to one page that will be generated and must have two properties:

• params: An object whose keys match the dynamic parameters in your file name. For a route like [slug].astro, you must provide a slug property (e.g., { slug: 'my-first-post' }). This determines the final URL of the page.
• props: An object containing any data you want to pass to the page component. Typically, you'll pass the entire content entry (e.g., the post object) so you can access its title, date, and content on the page.

For a more visual and narrated walkthrough, the following video demonstrates this process from start to finish.

A Practical Example: Building a Service Page Template

Let's bring this all together. Assume you have a content collection for your accounting services located at src/content/services/.

First, you would create the dynamic route file: src/pages/services/[slug].astro.

Inside this file, you'll implement the logic:

{/* src/pages/services/[slug].astro */}
---
import { getCollection, type CollectionEntry } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro'; // Import your layout

// 1. getStaticPaths generates the routes
export async function getStaticPaths() {
  const services = await getCollection('services');
  
  return services.map(service => ({
    params: { slug: service.slug }, // `service.slug` is the URL-friendly filename
    props: { service }, // Pass the full service object as a prop
  }));
}

// Define the type for the props we're receiving from getStaticPaths
interface Props {
  service: CollectionEntry<'services'>;
}

// 2. The page receives the `service` object via props
const { service } = Astro.props;
const { Content } = await service.render(); // Render the MDX content
---

<!-- 3. The page template uses the data -->
<BaseLayout title={service.data.title} description={service.data.summary}>
  <article>
    <h1>{service.data.title}</h1>
    
    <!-- Render the main body of the service page -->
    <Content />
  </article>
</BaseLayout>

Let's break down this code:

1. getStaticPaths:
   • It calls getCollection('services') to fetch all your service entries.
   • It then uses .map() to iterate over each service.
   • For each one, it returns an object that tells Astro: "Create a page at /services/{service.slug} and pass the entire service object to it as a prop."
2. Component Script:
   • const { service } = Astro.props; retrieves the specific service entry for this page. Since your getStaticPaths function returns one page for each service, Astro runs this template multiple times, each time with a different service prop.
   • await service.render() prepares the MDX content for rendering.
3. HTML Template:
   • The entire page is wrapped in your BaseLayout, passing the service's title and a summary for the <head>.
   • Inside the layout, you display the service.data.title and render the service's main content using the <Content /> component.

This single file, [slug].astro, is now a factory for generating all your individual service pages.

---
title: "My First Blog Post"
pubDate: 2024-08-15
description: "A short description of my first post for SEO purposes."
---

This is the content of my very first blog post. It's written in Markdown!

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

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

interface Props {
  post: CollectionEntry<'blog'>;
}

const { post } = Astro.props;
const { Content } = await post.render();
---
<BaseLayout title={post.data.title} description={post.data.description}>
  <article>
    <h1>{post.data.title}</h1>
    <p>Published on: {post.data.pubDate.toDateString()}</p>
    <hr />
    <Content />
  </article>
</BaseLayout>

Conclusion

Fantastic work! You have just unlocked one of the most powerful features of static site generation. By combining dynamic routes with getStaticPaths, you can now build a scalable, content-driven architecture where your pages are generated automatically from your data.

Key Takeaways:

• Dynamic Routes ([param].astro) act as templates for generating multiple pages.
• getStaticPaths is the engine that drives this process; it runs at build time to define which pages to create.
• It returns an array of objects, each defining the params (URL) and props (data) for a single page.
• This pattern is fundamental for building blogs, documentation sites, e-commerce product pages, and—in your case—service and case study pages for an accounting website.

Up Next:
You now have individual pages for each blog post. But how would a visitor discover them? In the next lesson, we will build a blog listing page that queries all your posts from the collection and displays them as a list of links, creating the main entry point to your blog.