Why the url is giving 404?
Answered
Ragdoll posted this in #help-forum
RagdollOP
I am a noob. I have added two pages about.tsx, posts/[id].tsx, But I see 404 when I go to the urls
http://localhost:3000/about
http://localhost:3000/posts/12
Code: https://gitlab.com/aruprakshit/next-app-router/-/tree/main/app/pages?ref_type=heads
http://localhost:3000/about
http://localhost:3000/posts/12
Code: https://gitlab.com/aruprakshit/next-app-router/-/tree/main/app/pages?ref_type=heads
Answered by Ray
the
the reason why you got 404 is you are using page router inside the app router
pages folder should be same level as app folder.the reason why you got 404 is you are using page router inside the app router
20 Replies
Ray
the
the reason why you got 404 is you are using page router inside the app router
pages folder should be same level as app folder.the reason why you got 404 is you are using page router inside the app router
Answer
RagdollOP
oh I see. I was following github copilot might be read it wrong
btw I am trying to understand the app based routing vs page based routing
the routes I wrote can be written in nextjs using app router without pages router as I wrote>
?
Ray
yes, try creating a route in
app/about/page.tsx and app/posts/[id]/page.tsxRagdollOP
Let me do it
Ray
// app/about/page.tsx
export default function Page() {
return <div>about</div>
}
// app/posts/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
return <div>posts {params.id}</div>
}RagdollOP
@Ray What I need to change in the index.js file as I can't see its content either https://gitlab.com/aruprakshit/next-app-router/-/tree/main/app?ref_type=heads
Ray
in app router, all page should be named in
page.tsxso
app/page.tsx is the index pageRagdollOP
ok
so near future page based routing wll be discontinued ?
like why these bi directional architecture?
Ray
not sure about this
the doc said this
app router is a new version
RagdollOP
ok
Thank you Ray
Ray
no problem😀