We are currently working on a project with a dynamic route [productId]. Within this page, we have multiple other pages that contain optional catch-all routes. The structure in the pages folder looks like this:
[productId]
contentOne
[[...slugOne]]
Unfortunately, there seems to be an issue with the optional catch-all routes not functioning properly when the pages are statically generated. For example, productId/contentOne does not work, whereas productOne/contentOne/extra works just fine.
This problem only occurs when the project is deployed on Vercel. All routes function correctly when running locally.
The following is the getStaticPaths function:
export async function getStaticPaths() {
return {
paths: [],
fallback: true,
}
}
And here is the getStaticProps function:
export async function getStaticProps({ locale }) {
return {
props: {
test: 'test',
...(await serverSideTranslations(locale, ['common'])),
}
}
}