Partly Dynamic Routes Possible?
Answered
Brewer's Blackbird posted this in #help-forum
Brewer's BlackbirdOP
Is it possible to have a route like
I'm trying to bypass a problem, where I cannot specify two routes that resolve to the same url, like
Looking forward to your help / input!
app/[locale]/my-favorite-[slug] where only the [slug] part is supposed to be dynamic?I'm trying to bypass a problem, where I cannot specify two routes that resolve to the same url, like
app/[locale]/(subfolder)/[slug] and app/[locale]/[slug]. I though, making part of the slug static might be part of the solution. Looking forward to your help / input!
Answered by Clown
Welp, i dont think you can do partly static like that.
You'll have to settle for
/[slug] and do the parsing of the slug yourself to match your needs.
You'll have to settle for
/[slug] and do the parsing of the slug yourself to match your needs.
12 Replies
@Brewer's Blackbird Is it possible to have a route like `app/[locale]/my-favorite-[slug]` where only the `[slug]` part is supposed to be dynamic?
I'm trying to bypass a problem, where I cannot specify two routes that resolve to the same url, like `app/[locale]/(subfolder)/[slug]` and `app/[locale]/[slug]`. I though, making part of the slug static might be part of the solution.
Looking forward to your help / input!
Is that (subfolder) supposed to be a route group?
Also from my knowledge you cant have a partly dynamic slug. One way might be using the catch-all dynamic route but i wouldn't use that normally
Brewer's BlackbirdOP
Yes, (subfolder) is supposed to be a route group. Sorry for the confusion 🙂 but that's not necessary, I guess. What I'm trying to achieve is to dynamically render different Page Components on the same path level.
So, I would like a different Component to render for
So, I would like a different Component to render for
my-site.com/some-slug than for my-site.com/some-other-slug.Welp, i dont think you can do partly static like that.
You'll have to settle for
/[slug] and do the parsing of the slug yourself to match your needs.
You'll have to settle for
/[slug] and do the parsing of the slug yourself to match your needs.
Answer
Brewer's BlackbirdOP
So, I would need to make the
[slug]/page.tsx Page Component decide, which Component to render based on the slug?Basically yes.
But it might not be the best of solutions. I would recommend you just go with the normal way nextjs works. I dont know what quirks might pop up
Brewer's BlackbirdOP
What would be the normal way in this case? 🙈
Just having an explicit subpath per component type? Or did I misunderstand something? Sorry 😄
Just having an explicit subpath per component type? Or did I misunderstand something? Sorry 😄
The normal way would be having an explicit path, yes.
Brewer's BlackbirdOP
Alright, thank you very much for your help! ☺️
Lakeland Terrier
Would parallel routes provide what you are looking for?
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
@Lakeland Terrier Would parallel routes provide what you are looking for?
https://nextjs.org/docs/app/building-your-application/routing/parallel-routes
Brewer's BlackbirdOP
Hey @Lakeland Terrier, I just came back to revisit the answer and saw your reply. Thanks a lot! 😌
It's interesting info, I didn't know about the feature. Though, I'm not sure, it helps with my problem. I don't have a very dynamic page, but a lot of pages with similar paths that serve static content. To keep the production build as small as possible, I want to render (or get from cache) as much as possible on-demand.
The problem is that I'd like to have both routes like
It's interesting info, I didn't know about the feature. Though, I'm not sure, it helps with my problem. I don't have a very dynamic page, but a lot of pages with similar paths that serve static content. To keep the production build as small as possible, I want to render (or get from cache) as much as possible on-demand.
The problem is that I'd like to have both routes like
[slug]/[slug] as well as [slug]/foo-bar-[slug] which, however, render different components...