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
@Ragdoll 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
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>
?
@Ragdoll the routes I wrote can be written in nextjs using app router without pages router as I wrote>
yes, try creating a route in
app/about/page.tsx
and app/posts/[id]/page.tsx
RagdollOP
Let me do it
// 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
@Ragdoll <@743561772069421169> 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
in app router, all page should be named in
page.tsx
so
app/page.tsx
is the index pageRagdollOP
ok
so near future page based routing wll be discontinued ?
like why these bi directional architecture?
@Ragdoll so near future page based routing wll be discontinued ?
not sure about this
the doc said this
app router is a new version
RagdollOP
ok
Thank you Ray
no problem😀