NextJS deployed to Vercel: 404 page not found

user_7362388 0
Viewed 17387

I have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.

Here is my folder structure:

app/
  - components
  - pages
    - editor
      - [id].tsx
    ...tsx
  - public
  - utils
    - db
      api.ts

I am using NextJs 10.0.3.

Here is a link to the deployed app.

I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.

Do you have pointers on where to look next?

EDIT 1:
Here is a link to the GitHub repo.

EDIT 2: I found an issue but don't know how to fix it.

This is how my build output looks like on Vercel: enter image description here

This is how it's supposed to look like on Vercel: enter image description here

Not sure why the whole _next folder is missing.

vercel next.js
5 Answers

I just had this exact same issue. I have my Next app in a sub directory. I think that might be the cause of some problems.

What worked for me was.

  • Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
  • The framework preset needs to be set to Next.js.
user_84890480

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

user_13515050

Edited

Try to deploy using now --prod --force The --force flag will clear your build cache (in production) and force production push. If still no working then make sure to add now.json

user_121747110
user_38168720

My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.

If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.

{
  "currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}

ref: https://vercel.com/docs/configuration#global/config-json/current-team

user_40531420
Related