nextjs nested dynamic folder routing

Update:

1. Which it causing this error because of [category_slug]-index.js that getServerSideProps ??
2. i tried to do index.js under product folder, it work... mean it okies with [category_slug] which serverSideprops, am i right?

This is my folder structure

pages     |-categories     |     |     |     |-[category_slug]     |     |  |-index.js          |     |-product     |        |-[product_slug].js     |  

It cause error when i enter in [product_slug]. Showing Error: A required parameter (category_slug) was not provided as a string in getStaticPaths for /categories/[category_slug]/product/[product_slug]

Would this possible to do nested routing folder in nextjs? i can't found any info for this. I showing my code in below

// [product_slug].js    export async function getStaticProps({ params: { product_slug } }) {    const product_res = await fetch(      `${API_URL}/products/?product_slug=${product_slug}`    ); // question mark is query slug, to find the slug in the json    const found = await product_res.json();      return {      props: {        product: found[0],      }    };  }    export async function getStaticPaths() {    // Retrieve all the possbile paths    const products_res = await fetch(`${API_URL}/products/`);    const products = await products_res.json();      return {      paths: products.map((product) => ({            params: { product_slug: product.product_slug },          }),      fallback: false,     };  }  

I tried to provide a hard code to [category_slug]. Would it correct in this way? i am not sure also. I couldn't found about this docs. Anyone can provide a right way to input first dynamic path in product_slug dynamic route?

export async function getStaticProps({ params: { product_slug } }) {    const product_res = await fetch(      `${API_URL}/products/?product_slug=orange_juice`    );       const found = await product_res.json();      return {      props: {        product: found[0],      },    };  }    export async function getStaticPaths() {    // Retrieve all the possbile paths    const products_res = await fetch(`${API_URL}/products/`);    const products = await products_res.json();      return {      paths: [        {          params: {            product_slug:              "categories/orange/product/orange_juice",          },        },      ],      fallback: false,    };  }    

https://stackoverflow.com/questions/65988686/nextjs-nested-dynamic-folder-routing February 01, 2021 at 03:29PM