I have a Next.js app router setup like this that shows /:category-handle and /products/:product-handle correctly, I need the product handle to be changed so that it shows /:category-handle/:product-handle. I have tried nesting the product folder inside [...category] folder but since its a catch all segment, it cannot show the dynamic routes inside it. I have looked through the Next.js docs and it looks like its not documented anywhere on how to achieve this. The [...category] is a catch all since there are other routes as well e.g. about, faqs etc. and without the catch all the category route throws a 404.
<code>app
├── (main)
│ └── (store)
│ └── [...category]
│ │ └── page.tsx
│ │ └── loading.tsx
│ ├── product
│ │ └── [handle]
│ │ └── page.tsx
│ │ └── loading.tsx
</code>
<code>app
├── (main)
│ └── (store)
│ └── [...category]
│ │ └── page.tsx
│ │ └── loading.tsx
│ ├── product
│ │ └── [handle]
│ │ └── page.tsx
│ │ └── loading.tsx
</code>
app
├── (main)
│ └── (store)
│ └── [...category]
│ │ └── page.tsx
│ │ └── loading.tsx
│ ├── product
│ │ └── [handle]
│ │ └── page.tsx
│ │ └── loading.tsx
How can this routing be achieved correctly in Next.js?