Next.js Discord

Discord Forum

New to Next.js, trying to figure out Routes

Unanswered
Common Murre posted this in #help-forum
Open in Discord
Avatar
Common MurreOP
I just set up a basic next.js app using create-next-app and have been having some trouble figuring out the routing for files and getting basic components like next/link to function. I chose to use the src/app structure when installing it as that was more similar to create-react-app.

1. I noticed immediately that unlike the Next.js tutorial I'm following as well as all of the other resources I see, the main page of the application when generated under the above configuration routes to src/app/page.tsx instead of pages/index.tsx. This is fine, but I'd still like to know why/how this is changed for the future.

2. I can't tell where Next.js is actually looking for my other.tsx files. Trying to open different pages in the way the tutorial describes using the above knowledge (e.g. localhost:port/about to access src/page/about.tsx) does not work and gives me a 404 page. I found this especially puzzling because I can create my own 404 page by creating src/app/not-found.tsx, so I would have thought that it would be looking in the app folder, but placing about.tsx there hasn't worked either.

9 Replies

Avatar
The problem is you are using the app router which is different from the pages router from the tutorial

Pages router is at src/pages, /about is src/pages/about.tsx

App router is at src/app, /about is src/app/about/page.tsx
Avatar
Common MurreOP
Oh ok, that makes sense. i guess i should ask in this case, is the app router just an alternative/update to the pages router? i'm just in the learning phase right now, so i don't know if it's possible to reconfigure this project somehow to use the pages router instead or if it's worth doing lol
Avatar
The app router is a new router for nextjs, completely different and independent from the pages router. The working of the two routers are not related and the syntaxes are a lot different as well
Avatar
Common MurreOP
oh wait, i just read a little bit more about it and yeah they are completely independent. so i should probably ask instead, since the app router coexists with the pages router, what determines which one gets used/which one takes priority?
Avatar
if they both define the same route, an error will be thrown
Avatar
Common MurreOP
ahh okay
Avatar
Common MurreOP
oh also, does that mean that it should still work to have routes defined by both routers as long as they don't conflict? e.g. files in both src/pages using the page format, and src/app using the app format
Avatar
correct
Avatar
Common MurreOP
aah, thought i had another question but it just seems that next.js might not like suddenly trying to use the page router when pages didn't exist before starting the app. couldn't get both routers to work at first with fast refresh alone but restarting the app solved the issue. thanks a bunch!