Storyblok + NextJS

import {useStoryblokState, StoryblokComponent} from "@storyblok/react";
import {CategoryPage} from "@depict-ai/react-ui";

// Your regular layout for a PLP page
import Layout from "@/components/Layout";

// Your ProductCard component
import {ProductCard} from "@/components/ProductCard";

export default function Page({ story, queryId }) {
  story = useStoryblokState(story);

  return (
    <Layout>
      {/* This is how you can allow support for collection specific overrides in the Storyblok Visual Editor */}
      {story?.content && <StoryblokComponent blok={story.content} />}

      {/* This is the CategoryPage component from the Depict UI, see the React Depict UI Integration Guide for details*/}
      <CategoryPage categoryId={queryId} productCard={ProductCard} />
    </Layout>
  );
}

export async function getStaticProps({ params }) {
  let slug = params.slug.join("/");

  // Your existing code to fetch storyblok data and whatnot
  const data = {
    // YOUR STORYBLOK RESPONSE
  };

return {
    props: {
      story: data ? data.story : false,
      queryId: slug, // This is what we will pass to the CategoryPage component to display the correct collection
      key: data ? data.story.id : false,
    }
  };
}

export async function getStaticPaths() {
  // Your existing logic to fetch static paths, see https://www.storyblok.com/tp/render-storyblok-stories-dynamically-in-next-js#dynamic-route-generation-with-getstaticpaths for inspiration

  return {
    paths: paths,
    fallback: true, // VERY IMPORTANT - since we won't rebuild every time a new collection is created, we need this to render on the fly
  };
}

import {CategoryPage} from "@depict-ai/react-ui";

// Your regular layout for a PLP page
import Layout from "@/components/Layout";

// Your ProductCard component
import {ProductCard} from "@/components/ProductCard";

export default function Page({ queryId }) {
  return (
    <Layout>
      {/* This is the CategoryPage component from the Depict UI, see the React Depict UI Integration Guide for details*/}
      <CategoryPage categoryId={queryId} productCard={ProductCard} />
    </Layout>
  );
}

export async function getStaticProps({ params }) {
  let slug = params.slug.join("/");

  return {
    props: {
      queryId: slug, // This is what we will pass to the CategoryPage component to display the correct collection
    }
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true, // VERY IMPORTANT - since we won't rebuild every time a new collection is created, we need this to render on the fly
  };
}