Next.js Discord

Discord Forum

Multiple dynamic segments in same route

Unanswered
Cape lion posted this in #help-forum
Open in Discord
Cape lionOP
Suppose I want to create an app where I want to be able to serve two different types of dynamic routes from the same route segment (for example /blog/[categoryName] and /blog/[postId)

In this case, there would be a certain group of routes that should be caught by the first route, and some that should be caught by the other one.

Is it possible to recreate this in the app directory? So basically having two dynamic routes for the same route segment and then just checking in each whether the current route matches?

25 Replies

Morelet’s Crocodile
You can try to convert the variable to a number and if it is possible you can show the content for the postId route otherwise the content for the category
Somali
Any other approaches @Morelet’s Crocodile? Is this the most performant?
Morelet’s Crocodile
I wouln't do it in one route😅
Somali
Would you prefix with /category/{category-name} @Morelet’s Crocodile?
Morelet’s Crocodile
I would make a route like blog/post/[id]
Shy Albatross
I'd probably do /blog/[type] and do parallel routes for categories and posts, then in the layout conditionally render one or the other based on value of type
Cape lionOP
Yes, I mean obviously making two different routes is the easy way to solve this, but I was explicitly looking for a way to handle both in one
Cape lionOP
@Shy Albatross Ah, that actually sounds like a viable route (no pun intended)
Shy Albatross
but that seems like making life hard for yourself based on your initial requirement to have one route for something that really is separate routes
Cape lionOP
For me it's mostly about having nicer url structures
Shy Albatross
realistically I'd still go with /blog/[category] and /blog/[post] because then I can statically generate thosepages based on category and post Ids
and I'd save myself the hussle of wondering "is this string a post Id or a category Id"
and better SEO, obviously
Cape lionOP
But just creating two dynamic routes for the segment won't work, right?
So I couldn't just create /blog/[categoryId] and /blog/[postId] in the same folder?
Shy Albatross
how can the server know then if the request's URL "blog/123" belongs to category segment or the post segment?
Shy Albatross
you can do that with parallel routes like I said before, it's up to you to decide if the type segment value belongs to what category, and conditionally render the proper page
blog/123 -> "oh his value 123 looks like a category Id, so I'll render the @category parallel route" is what your code would do
it works, but it's still bad
Cape lionOP
Hmm, got it. I'll think about it again
Shy Albatross
blog/[stuff]/layout.tsx reads the value of stuff and decides which page to render
export default function Layout({
  params,
  category,
  post,
}: {
  category: React.ReactNode;
  post: React.ReactNode;
  params: { stuff: string };
}) {
  const { stuff } = params;

  return looksLikeCategory(stuff) ? category : post;
}