Suponga que tiene datos de posts y categories de una base de datos de relaciones:
// 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' } ] Este es el formato de mi ruta: /categories/[category]/[page]
Con estructura de directorio de pages/categories/[category]/[page].js .
Entonces producirá estos caminos:
/categories/wishlist/1/categories/wishlist/2/categories/favorites/1 Intenté esto pero las paths devolvieron una matriz vacía:
// 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 } }Las llamadas asíncronas no funcionan con Array.forEach , en su lugar uso for (category of categories)
Código de trabajo:
// 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 } }