404 finding index.js
Answered
TensorPho posted this in #help-forum
I'm new to using the app router but I would have thought it would be able to find index.js. I've tried changing the config to point there and reading through the docs but I'm not really sure what I'm looking for. I also have checked that index.js return works but I reckon a different error would show up if that was the case
39 Replies
yeah
app folder and page folder should be at the same level
src/app and src/pagesin app router, the file name for a page is
page.jsSee ive been looking through this one https://nextjs.org/docs/app/building-your-application/routing and i thought
index.js would still be finedid you init the project with create-next-app?
I think you better start with it
So
components are inside app and pages which use components are inside pages seems like a step backwards to me. yes i did use create-next-app.components can be anywhere you likehave you chose to use app router?
Well i wanted to use it and i asked it to use app router
ah then shouldn't have the pages folder there
maybe try to init a new project
it should create
src/app/layout.js and src/app/page.js for youlike this basic example
see I want to understand how this works but its not helpful when there seems to be a big difference between in the two on naming conventions and when two same named things can mean two different things. Yeah i've seen that because that was what it originally generated. So I should have
app/page.js which would be the equivalent of index.js and app/components for my components but that can be anywhere really. Why do they have layout though? Is it needed?or is it like _app.js
the root layout is needed
what that was in the other router
yes it is like _app.js
but it only render once on page change
A root layout is the top-most layout in the root app directory. It is used to define the <html> and <body> tags and other globally shared UI.
I would suggest you read this first
https://nextjs.org/docs/app/api-reference/file-conventions
https://nextjs.org/docs/app/api-reference/file-conventions
Next.js has two different routers: the App Router and the Pages Router. The App Router is a newer router that allows you to use React's latest features, such as Server Components and Streaming. The Pages Router is the original Next.js router, which allowed you to build server-rendered React applications and continues to be supported for older Next.js applications.
if you are new to nextjs, I would suggest you start with app router
I've used pages before I'm just trying to start using app from now on because I know i'll need to learn how it works sooner rather later.
ah ok
this article should help you understand more the different between
page and app routerThank you for your explanations Ray. Maybe i should try porting over one of my older projects to see if that helps me understand before building from scratch as hopefully I'll be able to better associate stuff.
yes or looking at there example repo
@Ray https://github.com/vercel/app-playground
this also have a live demo site
vercel is pretty neat. Thanks again Ill do some playing around
np prob
Answer