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

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 /.

Tip

Remove the src/app/page.js file from the project.

Note

With this setup, dynamic stories are always rendered on the server for each request. Use the links endpoint of the Content Delivery API and generateStaticParams() to provide all routes. Learn more about static rendering in Next.js documentation.

Related resources

Dynamic Routes in Next.js

getStaticPaths in Next.js

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories