Dynamic Routing for blog post localhost/[post-id]
Answered
Yellowstripe scad posted this in #help-forum
Yellowstripe scadOP
Hello, i'm trying to create blog with homepage where we can see like 20 posts. Every post should lead to its own post page like
localhost/[post-id] or localhost/posts/[post-id]. I've read docs but I'm not sure how should i create this structure? Could anyone hand me some tips?Answered by alfon
Use dynamic routes
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
18 Replies
what have you tried and what error have you encountered?
@alfon Use dynamic routes
<https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes>
Yellowstripe scadOP
Hello, i've main /app folder
- /app
-- /[id]
--- /page.tsx
When I click on first post on homepage it leads to
- /app
-- /[id]
--- /page.tsx
When I click on first post on homepage it leads to
localhost/post/1 but its 404Giant panda
Because your file hierarchy has no file that would handle such a URL
Your current structure handles URLs of the shape
/[id]/Read the example on the page alfon linked thoroughly
And the text surrounding it
You should be able to match the folder structure to the path
Yellowstripe scadOP
Right, yeah it matched
host/1So I should create one more parent
app/posts/[id]Giant panda
Correct
@Giant panda Correct
Yellowstripe scadOP
Alright, yeah it was bit of confusing, I've handled that. I'll check out docs again anyway. THANKS!
Dont give up ðŸ‘
Yellowstripe scadOP
Maybe one more question.. is it possible to make
localhost/postsunreachable if theres no post [id] included?So it would work only with /posts/[id]
Giant panda
Yes, if you have no
page.tsx inside /postsThen
/posts is a route that leads to a 404Yellowstripe scadOP
Right, that solves that, thanks again!