My nextjs app can't find my api file
Answered
Tramp ant posted this in #help-forum
Tramp antOP
This is my project dir, I created this project before knowing that nextjs switched from pages routing to /app routing.
Even though I tried so many ways my app just gives 404 on website-data.js .
I also added the website-data.js
After reading the app routing I am thinking that I might need to create a route.js file in my api folder but I am not sure, could someone please look at this?
Even though I tried so many ways my app just gives 404 on website-data.js .
I also added the website-data.js
After reading the app routing I am thinking that I might need to create a route.js file in my api folder but I am not sure, could someone please look at this?
65 Replies
This is my project dir, I created this project before knowing that nextjs switched from pages routing to /app routing.You can still use the old
/pages routing. Do you want to try that first instead before continuing to using the app routing?Coz Its like learning a new framework
Tramp antOP
I want to go with app routing actually because I just started learnign nextjs yesterday.
Ok lets go
Tramp antOP
I still have pages and stuff because I was using gemini to learn and gemini thinks nextjs still uses pages.
have you tried going to the documentations?
Tramp antOP
Indeed after reading the docs I realized my mistakes but couldn't fix this.
I am thinking that I need route.js on the api dir but couldn't find a exact info.
Tramp antOP
Yes. I read this but first of all I am not %100 sure this is the problem and I don't know how should I change my file to this way if it's the problem.
I am not asking you to code it for me but could you send me into the right direction considering my handler code.
sure
i dont even know where the problem is
Well for starters the file naming convention
Answer
Tramp antOP
I can show you with a screen share if you want.
My app just doesn't find website-data
It's like if this file doesn't exists
like in app dir we have different naming convention
Because it uses a strict naming convention. Just read that document that alfon linked
@Clown Because it uses a strict naming convention. Just read that document that alfon linked
Tramp antOP
I did, but so like I need to create seperate unique directories for every single api endpoint I have?
Like app/website-data/route.js
app/blabla/route.js
....
and so on and so on?
Like app/website-data/route.js
app/blabla/route.js
....
and so on and so on?
you can let us know if there are any part of the documentation that are doubting you
the documentation is already pretty in-depth
you can also, use the
/pages dir if you wish to continue learning with geminiTramp antOP
I must say that I am very new web developer, I always worked with python oop, php and c/c++.
understandable, its just that Next.js is VERY opinionated, so things may have been taken care of and must follow certain convention defined by Next.js
very opinionated and very abstracted, meant for you to build stuff in seconds
Tramp antOP
I have one more question if this is how it's done, then I need to use nested routes for apis right?
Because if I were to create a unique directory for every single api I would have just sooooo many directories and it would be a mess, IMO
Because if I were to create a unique directory for every single api I would have just sooooo many directories and it would be a mess, IMO
you can
always catch-all routes under one folder and handle it on your own
or just use Server Action if the endpoints are only meant to be accessed inside Next.js
Tramp antOP
Oh my brain couldn't understand this so I decided not to use it for my first project 😄
ahh understandable, but this is a pretty common concept in web dev.
Think of them as "variables" in your URL
Think of them as "variables" in your URL
Next.js also includes examples of what i meant by that in the given article
again, if you have any doubts on what it actually means, feel free to ask here and open a help forum
(open new post preferrably)
titled: "Im not sure I understand how dynamic routes works"
something like that is good
titled: "Im not sure I understand how dynamic routes works"
something like that is good
Tramp antOP
I see thanks
Also I am using my machine as a dev env
And I created a .env file for accessing mongodb
Though since I didn't set-up restricted access mode
I am wondering if this db connection would work or not
again, even if help-forum may seem intimidating due to the fact that its indexed in the web, rest assured since its pretty laid back since it still acts as a conversastion
Tramp antOP
mongodb://127.0.0.1:27017/%
I have no idea how to set up mongodb in next.js project 😭
it should work
as I have used local postgresql server many times
and connect it using prisma via the connection string
postgresql://...:3636/...Tramp antOP
I don't know what prisma is, will check it.
@Tramp ant This is my project dir, I created this project before knowing that nextjs switched from pages routing to /app routing.
Even though I tried so many ways my app just gives 404 on website-data.js .
I also added the website-data.js
After reading the app routing I am thinking that I might need to create a route.js file in my api folder but I am not sure, could someone please look at this?
Norwegian Forest Cat
This is because you have to use
website-data/route.jsTramp antOP
One more problem
I created a new nextjs app with npx create @latest
And in the new app inside /page.js, there is Home() function.
Reading the documentation this should be Page() function
And there are 0 references for Home()
Norwegian Forest Cat
No, it doesn't matter what the function is called, it's
export defaultnames only matter for named exports
Tramp antOP
I see
Thanks