Multiple page types at same dynamic route?
Answered
West African Lion posted this in #help-forum
West African LionOP
I'm developing a blog in website where
For example,
How to achieve this in App router?
P.S. I'm using Next JS 15.
/blog/[slug] route can renders either post page or a category archive page based on the slug. For example,
/blog/updates-of-new-events renders a blog post page (article page)/blog/news renders a page displaying list of blog posts in news categoryHow to achieve this in App router?
P.S. I'm using Next JS 15.
Answered by B33fb0n3
then you do that. You have two options with different results:
1. Rewrite inside an route handler or middleware. In all 4 cases you will land on the "same" page, but different routes will be rendered. The url is for all 4 cases the same
2. Redirect inside your page where you fetch your backend (the backend knows if it's a category or blog). Then use the
I suggest using the first way
1. Rewrite inside an route handler or middleware. In all 4 cases you will land on the "same" page, but different routes will be rendered. The url is for all 4 cases the same
2. Redirect inside your page where you fetch your backend (the backend knows if it's a category or blog). Then use the
redirect function to redirect to a different path. Problem with this: the user won't be on the same url.I suggest using the first way
9 Replies
@West African Lion I'm developing a blog in website where `/blog/[slug]` route can renders either post page or a category archive page based on the slug.
For example,
`/blog/updates-of-new-events` renders a blog post page (article page)
`/blog/news` renders a page displaying list of blog posts in news category
How to achieve this in App router?
P.S. I'm using Next JS 15.
you can check if the slug contains a
-. If so, it's a blog post else it's a category. Then you only need to render the correct component and you are done@West African Lion solved?
@B33fb0n3 <@779966928394649620> solved?
West African LionOP
Sorry I didn't notice your reply
@B33fb0n3 you can check if the slug contains a -. If so, it's a blog post else it's a category. Then you only need to render the correct component and you are done
West African LionOP
Having a - in url is not a right solution
A category can also have a slug which contains a -. For example, business-ideas.
A category can also have a slug which contains a -. For example, business-ideas.
I was looking for something like having two different page layouts for category, and blog article at same level.
If the slug is of an article, render article page
If slug is of a category, render category archive page
If the slug is of an article, render article page
If slug is of a category, render category archive page
@West African Lion I was looking for something like having two different page layouts for category, and blog article at same level.
If the slug is of an article, render article page
If slug is of a category, render category archive page
hmm understood.. does your backend (where the data comes from) know if it's a category or a blog post?
@B33fb0n3 hmm understood.. does your backend (where the data comes from) know if it's a category or a blog post?
West African LionOP
Yeah... It does
@West African Lion Yeah... It does
then you do that. You have two options with different results:
1. Rewrite inside an route handler or middleware. In all 4 cases you will land on the "same" page, but different routes will be rendered. The url is for all 4 cases the same
2. Redirect inside your page where you fetch your backend (the backend knows if it's a category or blog). Then use the
I suggest using the first way
1. Rewrite inside an route handler or middleware. In all 4 cases you will land on the "same" page, but different routes will be rendered. The url is for all 4 cases the same
2. Redirect inside your page where you fetch your backend (the backend knows if it's a category or blog). Then use the
redirect function to redirect to a different path. Problem with this: the user won't be on the same url.I suggest using the first way
Answer
@West African Lion solved?