#create routes with getStaticPaths dynamically without folder structure
4 messages · Page 1 of 1 (latest)
Hi @last canyon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, it is possible to create dynamic routes in Astro using the getStaticPaths() function and the rest parameter ([...slug]). This allows you to generate pages for slugs of different depths.
For example, you can have a file src/pages/[...slug].astro to handle routes of varying depths. Here's an example of how you might use getStaticPaths() in this file:
---export async function getStaticPaths() {
const pages = [
{
slug: undefined,
title: "Astro Store",
text: "Welcome to the Astro store!",
},
{
slug: "products",
title: "Astro products",
text: "We have lots of products for you",
},
{
slug: "products/astro-handbook",
title: "The ultimate Astro handbook",
text: "If you want to learn Astro, you must read this book.",
},
];
return pages.map(({ slug, title, text }) => {
return {
params: { slug },
props: { title, text },
};
});
}
const { title, text } = Astro.props;---<html> <head> <title>{title}</title> </head> <body> <h1>{title}</h1> <p>{text}</p> </body></html>
(Source: Astro Documentation (https://docs.astro.build/en/guides/routing/#example-dynamic-pages-at-multiple-levels))
Similarly, you can have another file src/pages/[lang]/[...slug].astro to handle routes that include a language parameter. The getStaticPaths() function in this file would be similar, but would also include the lang parameter.
However, please note that the two [...slug].astro files would handle different sets of routes and would not be combined. The routing is determined by the file and folder structure in the src/pages/ directory.
If you want to handle multilingual content, you might consider fetching the appropriate content based on the lang parameter in your getStaticPaths() function, possibly by making a request to your CMS.