1

Due to the structure of my Storyblok Space, I'm unable to rewrite the final slugs to match my desired URL structure.

Inside Storyblok, I have to use the folder level translation and due to business rules, inside the language folders, I have to group stories inside "virtual folders". The structure inside my root folder and the desired final paths are:

  • en/website/home - en/home
  • en/website/about - en/about
  • en/website/category/business - en/category/business
  • en/landing-page/example-lp - en/example-lp
  • es/website/home - es/home
  • es/website/sobre - es/sobre

In this cases, website and langing-page are "virtual folders".

Using NextJS SSG, I am able to use getStaticPaths and getStaticProps with the Storyblok API and generate the pages with the full slug. This is achieved with a [[...slug]].js file inside my pages folder.

If I work with only one virtual path, for example website/, I can just return the getStaticPaths params as follows:

[{
    params: { slug: ['about'] }, // without the 'website' value
    locale: 'en',
}]

Just appending the virtual folder on the API request, inside getStaticProps, generates the files according to the desired path.

let { data } = await Storyblok.get(`cdn/stories/${params.locale}/website/${params.slug}`, option)

The drawback of this approach is that I must use only one virtual folder. I could not create structure where I could send dynamically the virtual folder parameter separately so it could be appended on the Storyblok request URL.

What I tried so far:

  • I was able to use the rewrites key inside my next.config.js to dynamically hide the vitrual folders. However, it does not affect my server side generated files.
  • Use Storyblok Advanced paths app to return the real_path of the stories on the cdn/links/ request. And even though I can setup the correct values to the real_path parameter, without the virtual folder reference I cannot request the stories correctly inside getStaticProps.
  • I wasn't able to modify the slug values of the responses from the Storyblok API.
  • I wasn't able to return an additional parameter to the getStaticPaths method. For example:
[{
    params: { slug: ['about'], folder: ['website'] },
    locale: 'en',
}]

Or even:

[{
    params: { slug: ['about'] },
    locale: 'en',
    folder: 'website'
}]

Obs: The object above kinda works if I change my project's folder structure to pages/[folder]/[...slug].js. However, even though I can access the folder parameter inside getStaticProps, it also goes to the final paths

Any suggestion, or different approaches to solve it is very welcome.

thiagohiguchi
  • 11
  • 1

0 Answers0