Dynamic Routing in Astro

Set up a catch-all route in the Astro project to render new stories dynamically.

Fetch and render a story dynamically

Create a src/pages/[…slug].astro file to fetch all stories in the space.

src/pages/[…slug].astro

---
import { useStoryblokApi } from "@storyblok/astro";
import StoryblokComponent from "@storyblok/astro/StoryblokComponent.astro";
import Layout from "../layouts/Layout.astro";

const { slug } = Astro.params;

const storyblokApi = useStoryblokApi();
const { data } = await storyblokApi.get(`cdn/stories/${slug || "home"}`, {
  version: "draft",
});

const story = data.story;
---

<Layout>
  <StoryblokComponent blok={story.content} />
</Layout>

Get the slug from the current route parameters, making an exception for the home story to be /.

With this approach, your project can automatically handle new stories you add to your space.

Tip

Remove the index.astro file from the project.

Note

To deploy in SSG mode, dynamic routes need to be manually defined. Use the links endpoint of the Content Delivery API and Astro’s getStaticPaths() to provide all routes. Learn more about dynamic routes in the Astro documentation.

Related resources

Dynamic Routes in Astro

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories