Skip to content
Storyblok Documentation Docs

Dynamic Routing in Next.js

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

Fetch and render a story dynamically

Section titled “Fetch and render a story dynamically”

Create a new file src/app/[[...slug]]/page.js file to fetch all stories in the space.

src/app/[[...slug]]/page.js
import { StoryblokStory } from '@storyblok/react/rsc';
import { getStoryblokApi } from '@/lib/storyblok';


export default async function Page({ params }) {
  const { slug } = await params;


  const fullSlug = slug ? slug.join('/') : 'home';


  const storyblokApi = getStoryblokApi();
  let { data } = await storyblokApi.get(`cdn/stories/${fullSlug}`, {
    version: 'draft',
  });


  return <StoryblokStory story={data.story} />;
}

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

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn