Next.js nested dynamic folder routing

Question

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 works, mean it okies with [category_slug] which getServerSideprops, am I right?

---

This is my folder structure

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

It causes an 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 Next.js? I can't find any info for this. I'm 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 hardcoded value to [category_slug]. Would it be correct in this way? I am not sure also. I couldn't find about this in the docs.

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

Can anyone provide a right way to input first dynamic path in [product_slug] dynamic route?

Answer 1

As @ckoala mentioned you just need to retrieve the possible category_slugs in your [product_slug]'s getStaticPaths.

I assume, based on your routing structure, that each product belongs to a given category. In that case, you'd need to fetch all products for each category in the getStaticPaths.

// categories/[category_slug]/product/[product_slug].js

export async function getStaticPaths() {
    // Add your logic to fetch all products by category

    return {
        paths: [
            // For each category/product combination you would have an entry like the following:
            {
                params: {
                    category_slug: 'orange'
                    product_slug: 'orange_juice',
                }
            }
        ],
        fallback: false
  };
}

Your getStaticProps would then also expect the additional category_slug param.

export async function getStaticProps({ params: { category_slug, product_slug } }) {
    // Add logic to fetch a single product based on `category_slug` and/or `product_slug`

    return {
        props: {
            product
        }
    };
}

Given the entry used as an example in getStaticPaths you'd be able to access the following path: /categories/orange/product/orange_juice.