Suppose you have posts and categories data from a relation database:
// category_id on categories.id
const posts = [
{ id: '1', title: 'dream pc', category_id: '1' },
{ id: '2', title: 'my dream house design', category_id: '1' },
{ id: '3', title: 'bing chillin', category_id: '2' },
]
const categories = [
{ id: '1', name: 'wishlist' },
{ id: '2', name: 'favorites' }
]
This is my route format: /categories/[category]/[page]
With directory structure of pages/categories/[category]/[page].js.
So it will produce these paths:
/categories/wishlist/1/categories/wishlist/2/categories/favorites/1I've tried this but paths returned an empty array:
// pages/categories/[category]/[page].js
export async function getStaticPaths() {
const paths = []
// I'm using supabase
const { data: categories, error } = await supabase.from('categories').select('id, name')
categories.forEach(async (c) => {
const { data, error, count } = await supabase
.from('posts')
.select('id', { count: 'exact', head: true })
.eq('category_id', c.id)
for (let i = 0; i < count; i++) {
// This should push the path params to the paths variable, but it didn't
paths.push({
params: {
// For simplicity, 1 post per page
page: i + 1,
categoryId: c.id,
category: c.name
}
})
}
})
// It returns an empty array []
console.log(paths)
return { paths, fallback: false }
}
Async calling does not work with Array.forEach, instead I use for (category of categories)
Working code:
// pages/categories/[category]/[page].js
export async function getStaticPaths() {
const paths = []
// I'm using supabase
const { data: categories, error } = await supabase.from('categories').select('id, name')
// Use for/of instead of forEach
for (category of categories) {
const { data, error, count } = await supabase
.from('posts')
.select('id', { count: 'exact', head: true })
.eq('category_id', c.id)
for (let i = 0; i < count; i++) {
paths.push({
params: {
page: (i + 1).toString(),
categoryId: category.id,
category: category.name
}
})
}
})
return { paths, fallback: false }
}