Next.js Static Nested Dynamic Routing with nested iteration

Question

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/1

I'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 }
}

Are you getting the expected data from the supabase's requests? If categories is empty that would explain why you're getting an empty paths array. — juliomalves
– juliomalves, Commented Oct 13, 2021 at 20:36
If you log count to the console, does it return the expected value on each forEach iteration? — juliomalves
– juliomalves, Commented Oct 14, 2021 at 9:28

Fransisco Wijaya · Accepted Answer · 2021-10-14 14:09:46Z

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 }
}

Collectives™ on Stack Overflow

Next.js Static Nested Dynamic Routing with nested iteration

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related