Wordpress-style categories/slug App Router setup
Unanswered
Calliope Hummingbird posted this in #help-forum
Calliope HummingbirdOP
Hi there! Does anyone know any patterns for achieving this sort of "Wordpress-style" route structure, but with dynamic routes, instead of hard-coded segments?
I should also mention that I am using
In my CMS (Strapi) I have the typical notion of Categories (that have many Pages) and Pages, but i haven't figured out if it's possible to do Wordpress-style routing with segment (category) names that are not hard-coded (as I have currently, see screenshot)
Ideally a developer wouldn't need to create the folders and copy a
Any and all help appreciated, even if this isn't possible. Thanks for reading!
mydomain.com/toys [toys category catalog page]mydomain.com/toys/troll-doll [toys category, toy page]mydomain.com/games [games category catalog page]mydomain.com/games/connect-four [games category, game page]mydomain.com/about [non-category page] (does not conflict with catalog pages)mydomain.com/contact-us ...etcI should also mention that I am using
output: exportIn my CMS (Strapi) I have the typical notion of Categories (that have many Pages) and Pages, but i haven't figured out if it's possible to do Wordpress-style routing with segment (category) names that are not hard-coded (as I have currently, see screenshot)
Ideally a developer wouldn't need to create the folders and copy a
page.tsx in there every time a user wanted to create a new mydomain.com/category/..., I'm sure there's a sensible way to approach this but as of yet I haven't found it! Any and all help appreciated, even if this isn't possible. Thanks for reading!
14 Replies
Clown
You can use dynamic route within another dynamic route:
- toys/[slug]/page.tsx
- toys/[slug]/[sec_slug]/page.tsx
- toys/[slug]/page.tsx
- toys/[slug]/[sec_slug]/page.tsx
Calliope HummingbirdOP
Thanks @Clown
The idea is that
i.e.
Since we can't have
and
in the same folder:
I'm wondering if this is possible, or if there's another way around it
I could be approaching this the wrong way too
The idea is that
/toys would also be a (Category) dynamic route (rather than hard coded - as shown in the screenshot), any thoughts around that?i.e.
[toys]/[slug] Since we can't have
App/[category]/[slug] and
App/[slug]in the same folder:
⨯ unhandledRejection: Error: You cannot use different slug names for the same dynamic path ('category' !== 'slug').
I'm wondering if this is possible, or if there's another way around it
I could be approaching this the wrong way too
Clown
you should be able to do App/[Category]/[CategoryItem]
Calliope HummingbirdOP
OK - but this would conflict with App/[slug] - say, for an /about page
Clown
hmm...
I cannot think of any other than using dynamic optional catchall routes however i would not recommend that
Calliope HummingbirdOP
Yeah I was also looking at those and thought it doesn't seem the right way to go
Clown
its basically gonna make a mess. The other thing would be maybe using path rewrites
honestly tho, just creating one extra path in the routes would just save you from all this trouble.
using dynamic catch all routes would be very much not recommended.
not exactly sure how helpful this will be but take a look at: [Rewrites](https://nextjs.org/docs/app/api-reference/next-config-js/rewrites)
this way you might be able to use a path like /item/category/catergoryItem while masking it as /category/catergoryItem/
Cuckoo wasp
@Calliope Hummingbird , were you able to do this? I'm building an Blog app in NextJS 14. I wanted to implement some features of wordpress slugs as well.
Calliope HummingbirdOP
I wasn't unfortunately @Cuckoo wasp, had to settle for hardcoded segments