---
title: Dynamic Routing in Next.js
description: Learn how to enable dynamic rendering of new stories by setting up a catch-all route in Next.js.
url: https://storyblok.com/docs/guides/nextjs/dynamic-routing
---

# 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

```javascript
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](https://www.storyblok.com/docs/api/content-delivery/v2/links/) of the Content Delivery API and `generateStaticParams()` to provide all routes. Learn more about [static rendering in Next.js documentation](https://nextjs.org/docs/app/api-reference/functions/generate-static-params).

## Related resources

[Dynamic Routes in Next.js](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)

[getStaticPaths in Next.js](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[Content Delivery API: Retrieve Multiple Stories](/docs/api/content-delivery/v2/stories/retrieve-multiple-stories)

  

## Pagination

-   [Previous: Visual Preview in Next.js](/docs/guides/nextjs/visual-preview)
-   [Next: Content Modeling in Next.js](/docs/guides/nextjs/content-modeling)