Hi @lofty lotus. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Creating multiple options for content displayed with generateStaticParams
stiff mapleBOT
Based on the information provided in the extracts, you can use the generateStaticParams function to generate static routes for each translator. This function can be used in combination with dynamic route segments to statically generate routes at build time instead of on-demand at request time.
Here's an example of how you might use generateStaticParams to generate routes for each translator:
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.map((post) => ({
slug: post.slug,
translator: post.translator // assuming translator is a property of post
}))
}
In this example, each post's translator is included in the route parameters. This would allow you to access the translator directly from the route parameters in your page component.
However, if you have multiple translators for a single post and you want to generate a route for each translator, you might need to flatten your array of posts into an array of post-translator pairs. Here's an example:
export async function generateStaticParams() {
const posts = await fetch('<https://.../posts'>).then((res) => res.json())
return posts.flatMap((post) =>
post.translators.map((translator) => ({
slug: post.slug,
translator: translator
}))
)
}
In this example, if a post has two translators, two routes will be generated for that post, one for each translator.
Remember that the generateStaticParams function is smart about data retrieval. If content is fetched within the generateStaticParams function using a fetch request, the requests are automatically memoized. This means a fetch request with the same arguments across multiple generateStaticParams, Layouts, and Pages will only be made once, which decreases build times.