NextJS Optional catch all routes not working when deployed

Question

We have a project that contains one dynamic route [productId], and inside this page, we have several other pages that include optional catch-all routes. Here is the structure on the pages folder:

[productId]
  contentOne
    [[...slugOne]]
 

The issue is, the optional catch-all are not workink properly whenever the pages are statically generated. Ex: productId/contentOne does not work, but productOne/contentOne/extra works The problem occurs only when deployed in vercel. All routes work perfectly on local.

Here is the getStaticPaths:

export async function getStaticPaths() {    
  return {    
    paths: [],    
     fallback: true,    
   }    
 } 

Here is the getStaticProps:

export async function getStaticProps({ locale }) {
  return {
    props: {
      test: 'test',
      ...(await serverSideTranslations(locale, ['common'])),
    }
  }
}

Answer 1

We have an open issue for this: https://github.com/vercel/next.js/issues/30631

Meanwhile, we had to use rewrites (this goes into the next.config file):

async rewrites() {
return {

  beforeFiles: [

   {
     source: '/:productId/contentOne',
     destination: '/:productId/contentOne/index'
   }
  ]
}