Catch-all [...slug] at root conflicts with other dynamic routes and optional catch-all conflicts with root in Next.js App Router.

[guimeraalex020]

Catch-all [...slug] at root conflicts with other dynamic routes and optional catch-all conflicts with root in Next.js App Router

Hi Next.js team and community,

I’m building an ecommerce app with Next.js App Router with these routes:

• /users/[id] for user profiles
• A root-level catch-all route [...slug] intended to handle multi-level dynamic paths such as:
  • /electronics/mobiles/iphone
  • /electronics/mobiles
  • /electronics

The problems I’m encountering:

• Using a non-optional catch-all route (app/[...slug]/page.tsx) causes conflicts with other dynamic routes like /users/[id], making those routes unreachable.
• Using an optional catch-all route (app/[[...slug]]/page.tsx) causes conflicts with the root / route (app/page.tsx) because the optional catch-all includes the root path.

Is there a recommended pattern or best practice to:

• Keep specific dynamic routes like /users/[id] working properly,
• Keep the root / route independent, and
• Have a root-level catch-all multi-level dynamic route that doesn’t conflict with either?

Should routes be structured differently or is there a way to configure Next.js routing to avoid these collisions?

---

Other observations

I understand there are two common solutions:

1. Add a prefix for the catch-all route (e.g. /category/[...slug]) — but from an SEO perspective, this is not ideal for my use case since I want clean URLs directly under root.

2. Avoid catch-all and manually create nested routes like /[category]/[subcategory]/[product] — but this feels less clean and will lead to a lot of duplicated code and complex routing logic.

I would appreciate any guidance on best practices or alternative patterns.

Thanks in advance!

[4rnzz]

I'm also confused about that