Next.js App Router: How to handle multiple categories & subcategories in dynamic routes?

Question

i have the following issue: I have a page where i have categories and some of those categories have subcategories. The categories always have the same layout and the products also have the same layout. What i wanted to do was this structure and the pages are generated via API:

app/
  [...category]/
  page.tsx
  [product]/
    page.tsx

so i can have the following example routes:

category1/product1
category2/category3/product2
...

but i will get the error

Catch-all must be the last part of the URL

How do you guys would achieve this?

My current solution is this:

app/
  [...slug]
    @product/
      page.tsx
    @category
      page.tsx
    layout.tsx

and inside layout.tsx i check if the requested category has subcategories and if not, render product. The issue here is, that during build or render, Next.js always tries to generate both layouts for each slug and that causes some issues sometimes