title: Next.js nested dynamic folder routing
body: <p><strong>Update:</strong></p>
  <ol>
  <li>Which it causing this error because of [category_slug]-index.js that <code>getServerSideProps</code>?</li>
  <li>I tried to do <code>index.js</code> under product folder, it works, mean it okies with [category_slug] which <code>getServerSideprops</code>, am I right?</li>
  </ol>
  <hr />
  <p>This is my folder structure</p>
  <pre><code>pages
     |-categories
         |-[category_slug]
             |-index.js     
             |-product
                 |-[product_slug].js       
  </code></pre>
  <p>It causes an error when I enter in <code>[product_slug]</code>. Showing:</p>
  <blockquote>
  <p>Error: A required parameter (category_slug) was not provided as a string in getStaticPaths for /categories/[category_slug]/product/[product_slug]</p>
  </blockquote>
  <p>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.</p>
  <pre class="lang-js prettyprint-override"><code>// [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) =&gt; ({
            params: { product_slug: product.product_slug },
          }),
      fallback: false, 
    };
  }
  </code></pre>
  <p>I tried to provide a hardcoded value to <code>[category_slug]</code>. Would it be correct in this way? I am not sure also. I couldn't find about this in the docs.</p>
  <pre class="lang-js prettyprint-override"><code>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:
              &quot;categories/orange/product/orange_juice&quot;,
          },
        },
      ],
      fallback: false,
    };
  }
  </code></pre>
  <p>Can anyone provide a right way to input first dynamic path in <code>[product_slug]</code> dynamic route?</p>