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?

Decoy

It seems to me, that you need to fetch the possible [category_slugs] in getStaticPaths() in your [product_slug].js aswell. Like the error says: "(category_slug) was not provided" – Rivers

@Rivers yeah, i tried hard code for that. it still return same error. i guess my way are incorrect?? i have updated the post. – Decoy

I see you have no index.js in your [category_slug] directory. You should try to fetch all possible paths / slugs there. I also found this post to be helpful: #57649190 – Rivers

Thank for provide this. But it a little bit different with my situation. I guess the nextjs cannot found what is my [category_slug] path name during build static file so causing error. In the post you share, there didn't nested dynamic folder like my situation. – Decoy

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.

Splatter

Cool. Thank for your helping hand. It works! =) – Decoy