Next.js Discord

Discord Forum

Why the url is giving 404?

Answered
Ragdoll posted this in #help-forum
Open in Discord
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
Answered by Ray
the 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
View full answer

20 Replies

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>
Ray
yes, try creating a route in app/about/page.tsx and app/posts/[id]/page.tsx
RagdollOP
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
so app/page.tsx is the index page
RagdollOP
ok
so near future page based routing wll be discontinued ?
like why these bi directional architecture?
the doc said this
app router is a new version
RagdollOP
ok
Thank you Ray
Ray
no problem😀