Next.js Discord

Discord Forum

Why the url is giving 404?

Answered
Ragdoll posted this in #help-forum
Open in Discord
Avatar
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

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