NextJS deployed to Vercel: 404 page not found

Question

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:

This is how it's supposed to look like on Vercel:

Not sure why the whole _next folder is missing.

Answer 1

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.

Answer 2

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

Answer 3

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

Answer 4

Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings. More here: https://vercel.com/docs/concepts/deployments/build-step