How to create a root-level catch-all dynamic route in Next.js App Router without conflicting with other dynamic or root routes?

I'm building an ecommerce app with Next.js App Router and have these routes:

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

Problem

• Using a non-optional catch-all route (app/[...slug]/page.tsx) breaks other dynamic routes like /users/[id].
• Using an optional catch-all route (app/[[...slug]]/page.tsx) breaks the root / route (app/page.tsx) because the optional catch-all also matches /.

What I want

• /users/[id] routes to work properly
• Root / route to remain accessible
• Root-level catch-all multi-level route that doesn’t conflict with either

What I've tried

• Using [...slug] at root — conflicts with /users/[id]
• Using [[...slug]] — conflicts with / root route
• Using a prefixed catch-all route (e.g. /category/[...slug]) — not desirable due to SEO goals (I want clean URLs directly under root)
• Creating manual nested routes (/[category]/[subcategory]/[product]) — leads to complex and duplicated code

Question

Is there a recommended way to structure routes or configure Next.js to avoid these conflicts? How do others handle root-level multi-segment dynamic routing alongside specific dynamic routes and a root page?

Thank you for any insights or examples.