CODEWITHSUNDEEP
javascriptroutesnext.jsurl-routingsupabase
Fransisco Wijaya
Fransisco Wijaya

Reputation: 397

Next.js Static Nested Dynamic Routing with nested iteration

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:

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

Upvotes: 0

Views: 967

Answers (1)

Fransisco Wijaya
Fransisco Wijaya

Reputation: 397

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

Upvotes: 1

Related Questions