Next.js Discord

Discord Forum

Deployed Vercel First Time - 404

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Hi all,

Following the next.js tutorial and published my first app

Signed up for Vercel, Connected Github, Imported Repo

https://lodgi-i6d2xo35y-rhys-hughes-projects.vercel.app/

I get a 404 not found error. Not sure why.

When I run this locally with npm run dev, it works perfect.

I just pushed from my GitHub desktop to origin, so it has latest code.

I re-deployed in Vercel, same result.

Any tips?
Answered by joulev
remove the outer package-lock.json
copy everything inside nextjs-dashboard/ out
remove the nextjs-dashboard/ folder
now try redeploying again on vercel
View full answer

29 Replies

Australian Freshwater CrocodileOP
Yes, I just checked that and now it says

Error: No Next.js version could be detected in your project. Make sure"next"is installed in "dependencies" or "devDependencies"

project has this for sure

"dependencies": { "next": "^14.0.2",
@Australian Freshwater Crocodile Yes, I just checked that and now it says `Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"` project has this for sure ` "dependencies": { "next": "^14.0.2",`
joulev
could you go to Settings > Security > Logs and Source Protection and turn the protection off (temporarily)

then send me the deployment page url (https://vercel.com/<yourname>/<projectname>/<uniqueid>) so that i can inspect it?
Australian Freshwater CrocodileOP
https://lodgi-rhys-hughes-projects.vercel.app/
or this
in deployment summary, it says no framework detected
@Australian Freshwater Crocodile or this
joulev
no, both of them i can't access. something like this https://vercel.com/joulev-proj/debug/DpsHc1azEv5MGczmdz9tiGP8XYJT

note the Public tag
Australian Freshwater CrocodileOP
this is my first time using vercel...what should i do to change that?

Note this is a screenshot of my project, hopefully the structure is ok
@Australian Freshwater Crocodile this is my first time using vercel...what should i do to change that? Note this is a screenshot of my project, hopefully the structure is ok
joulev
oh.., this structure is not correct. could you go to your code editor and take a screenshot of the entire thing?
it should have next.config.js/next.config.mjs, package.json, node_modules, so on and so forth
Australian Freshwater CrocodileOP
joulev
remove the outer package-lock.json
copy everything inside nextjs-dashboard/ out
remove the nextjs-dashboard/ folder
now try redeploying again on vercel
Answer
Australian Freshwater CrocodileOP
what did i do wrong? i just followed the tutorial at https://nextjs.org/learn/dashboard-app
ok, so bring the internals up a level?
this is what it looks like now
@Australian Freshwater Crocodile what did i do wrong? i just followed the tutorial at https://nextjs.org/learn/dashboard-app
joulev
you don't really do anything wrong, just that the content of the app is one folder deeper than it should be
Australian Freshwater CrocodileOP
@Australian Freshwater Crocodile Click to see attachment
joulev
yup look good to me. just to be sure, remove node_modules and run npm install again
then push to github and deploy to vercel again, how does it look now?
Australian Freshwater CrocodileOP
trying now...does pushing to git auto deploy?
joulev
should be, yes
Australian Freshwater CrocodileOP
lovely, that is working now
thank you so much sire
joulev
nice, glad to hear. yeah what was wrong is that: you put the app one level too deep so vercel couldn't find it
Australian Freshwater CrocodileOP
no idea how i got one level too deep X_X

i followed the tut carefully, shrug 😛
thank you again
joulev
lovely app working now. good luck with the tutorial!
Australian Freshwater CrocodileOP
so doing the tutorial but replacing their dummy data with real data