Show/Edit dynamic routes inside catch-all router of Next.js App Router

[sheikhumar93]

Summary

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.

How can this routing be achieved correctly in Next.js?

Additional information

app
├── (main)
│   └── (store)
│   └── [...category]
│   │   └── page.tsx
│   │   └── loading.tsx
│   ├── product
│   │   └── [handle]
│   │       └── page.tsx
│   │       └── loading.tsx

Example

No response

[Humerous]

You don't need a catch-all route for the category in this case.

A catch-all segment such as [...category] has to consume the remainder of the URL, so it cannot then have another dynamic segment after it. For the URL structure you described, model the route structure directly:

app/
  (main)/
    (store)/
      [category]/
        page.tsx
        [product]/
          page.tsx
    about/
      page.tsx
    faqs/
      page.tsx

[js713-lab]

Approach

In the App Router, a catch-all like app/docs/[...slug]/page.tsx owns those segments. You generally don’t “edit inside” it from another route tree.

Options:

1. Parallel routes / intercepting routes if you want a list + detail UI without leaving the catch-all shell.
2. Split trees: e.g. app/docs/(browse)/[[...slug]] vs app/docs/(edit)/[...slug]/edit/page.tsx with route groups.
3. For an editor, use a sibling segment: app/docs/[...slug]/page.tsx (view) and app/docs/[...slug]/edit/page.tsx (edit). Nested routes under the same dynamic segment work well.

params.slug is an array for catch-alls — join it when building links:

const path = Array.isArray(slug) ? slug.join("/") : slug;

If you share your folder tree, we can map the exact pattern.