dimanche 18 juillet 2021

Next.js nesting dynamic routes

Im trying to make an ecommerce with next and I want to do the following route:

localhost:3000/category/[categoryName]/[subcategoryName]

This route works: localhost:3000/category/[categoryName], but when I try with a subcategory it throw: "Error: A required parameter (category) was not provided as a string in getStaticPaths for /category/[category]/[subcategory]".

Folder structure goes like this:

pages/
   category/
   index.js
   [subcategory]/
     index.js

This is the code for [subcategory].js:

import { db } from "../../../../util/firebase"

const Subcategory = ({}) => {
    return (
        <div>
            
        </div>
    )
}

export async function getStaticPaths() {
    let subcategoriesPaths = []
    await db.collection('categories')
        .get()
        .then(querySnap=> querySnap.forEach(doc=>{
            const { subcategories } = doc.data()
            if(subcategories.length>0){
                const subcategoriesNames = subcategories.map(sub=> ({params: {subcategory: sub.name}}))
                subcategoriesPaths.push(...subcategoriesNames)
            }
        }))
    console.log(subcategoriesPaths)
    return { 
        paths: subcategoriesPaths,
        fallback: false
    }
}
export async function getStaticProps() {
    return {
        props: []
    }
}
export default Subcategory



Aucun commentaire:

Enregistrer un commentaire