Next.js : URL with domain.com/category/post - reactjs

Question

I have trouble understanding the dynamic URL routing to match my use case, and the examples only showcase structure like : domain.com/categories/category1, domain.com/posts/post-1.
As the title says, I would like to have the following URL structures on my blog, with Next.js :
https://www.example.com/category1/post-1
https://www.example.com/category1/post-2
https://www.example.com/category1/post-3
https://www.example.com/category2/post-4
https://www.example.com/category2/post-5
...
I would also like the pages :
https://www.example.com/category1
https://www.example.com/category2
to be accessible.
So far, my file structure looks like this : but I'm getting 404 errors.
Thank you for your help

Answer 1

If that can be useful to someone else, I've found the solution.
The folder structure has to be like this :
pages
[category]
[slug.tsx] // (post page)
index.tsx // (category page)
In the [slug.tsx] page, your static paths must reflect the structure :
export const getStaticPaths: GetStaticPaths = async () => {
const allPosts = await getAllPostsWithSlug();
return {
paths: allPosts?.map((post) => `/${post.category.slug}/${post.slug}`) || [],
fallback: true,
};
};
In the index.tsx (category) page, likewise :
export const getStaticPaths: GetStaticPaths = async () => {
const allCategories = await getAllCategories();
return {
paths: allCategories.map((category) => `/${category.slug}`) || [],
fallback: true,
};
};
With this, I can access my posts with their category in the url.