Skip to content
Storyblok Documentation Docs

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

Section titled “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.

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn