Expose slug, uuid of page to StoryblokStory

[esilver-automox]

Description

I am using the Storyblok SDK with Nextjs using the app router. When setting up my app for use and using StoryblokStory in my [...slug]/page.tsx I pass it the whole storyblok story object but what is exposed to my underlying page type is the story.content object. This does not have access to the uuid of the story or the slug of the page which is necessary for me to fetch secondary data.

Suggested solution or improvement

Expose the whole story object to the StoryblokStory
OR
have options to pass uuid, slug to the StoryblokStory

Additional context

my [...slug]/page.tsx looks like

export async function fetchData(slug) {
  const version = process.env.NEXT_PUBLIC_SB_VERSION === 'published' ? 'published' : 'draft'
  const storyblokAPI = getStoryblokApi()
  return storyblokAPI.get(`cdn/stories/${slug}`, {version})
}


export default async function SBPage({params}: {params: {slug: string[]}}) {
  const slug = params.slug ? params.slug.join("/") : "";
  const {data} = await fetchData(slug)

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

and one of my underlying page types looks like

export default function Author({blok, slug}){
  // slug is undefined
  const slugFromBlok = blok.full_slug // also undefined
  const uuid = blok.uuid // also undefined but I really need this for fetching further info
  // display code here
  {(blok.body || []).map((nestedBlok) => {
    return <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
  })}
}

Validations

• Follow our Code of Conduct

[grgcnnr]

You can pass arbitrary props to StoryblokStory and they'll be available in your component.

return <StoryblokStory story={data.story} slug={data.slug} storyUUID={data.uuid} />