To avoid having to create a Story in Storyblok for each collection, we can make use of NextJS dynamic routing.

This example assumes you are using the NextJS Pages Router when we mention file names and their locations

Let’s say you want all collections to be displayed under the /collections route. You can create a file called [...slug].js in a collections folder under pages.

Make sure you have the fallback option set to true in your getStaticPaths function, otherwise NextJS will not render the page on the fly

For details on ProductCard and CategoryPage see the Product Card and Category Page instructions.

You have two examples below:

The first and recommended way is that you check if the page has been configured in the Storyblok Visual Editor, and if so, render the Story before the CategoryPage component. Otherwise, render the CategoryPage component directly. This will allow anyone using Storyblok to provide template overrides for specific collections.

The second way is a minimal setup, where you only render the CategoryPage component. This is useful if you don’t want to allow template overrides for specific collections.