Next.js Discord

Discord Forum

Dynamic app routing /cat/cat2/cat3/product

Unanswered
Red-faced Cormorant posted this in #help-forum
Open in Discord
Red-faced CormorantOP
Hey, I'm looking to migrate a site to medusa + next 13 with app routing. i want to recreate existing url structure which:
- is up to three categories deep
- allows products at category depth 1, 2 or 3
- if no product as last segment, then show cat index

in the backend categories have a unique handle, e.g. 'sport/tennis/shoes'. products also have a handle, which is unique.

the url would consist of up to 4 segments, and the last segment may, or may not, be a product.

is there a 'simple' way to handle this? i've searched high and low but haven't found an example which fits. any pointers at all would be very much appreciated.

16 Replies

/page.tsx
/[slug1]/page.tsx
/[slug1]/[slug2]/page.tsx
/[slug1]/[slug2]/[slug3]/page.tsx
/[slug1]/[slug2]/[slug3]/[slug4]/page.tsx

why not this?
edit: for better semantics
Red-faced CormorantOP
that solution wouldn't allow
/category/subcategory/product
or /category/product
/category/subcategory/product
would be handled with
/[cat1]/[cat2]/[cat3]/page.tsx

and
/category/product
would be handled with
/[cat1]/[cat2]/page.tsx

So i think it would work
can always check first if last dynamic segment is a category or product.
if product then show product details
and if category then show a list
does subcategory always belong to a category? and not multiple category?
if so then its very much possible
Red-faced CormorantOP
maybe i'm overcomplicating things and confusing myself.
what i'm working on at the moment is src/app/(main)/(categories)/[...category]/page.tsx
then testing if last segment is product, if yes then show product. if not, show category. which i guess is essentially the same. it just seems like a bit of a faff, and i assumed it would be a relatively common url format and there may be an 'exemplar' way to do it. i'm very new to next so don't have too much confidence that i know what i'm doing 🤣
(..) is a route group. Its purely for organizational purposes and does not affect final route :/
so in reality you only achieve this -> /[slug1]/page,tsx
Red-faced CormorantOP
the [...category] is a catch all, is it not?
oh right yeah
Red-faced CormorantOP
thats how i''m using it and splitting out the params
sure you can do that
if you choose to use [...folderName] then the logic rests on your hands to separate out cats and products
it just seems like a bit of a faff
dont blame yourself, blame the existing system lol
Red-faced CormorantOP
i'd need to do that isProduct test either way
haha