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.

Anirudh · Accepted Answer · 2022-05-14 07:46:33Z

101

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

answered May 14, 2022 at 7:46

Anirudh

3,6987 gold badges84 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Itay Tur Over a year ago

1) Change Framework preset: go to the project page -> settings tab -> Build & Development Settings -> Change Framework preset from Other to Next.js 2) re-deploy: The Deployments tab lists all the previously deployed builds. Click the vertical ellipsis (⋮) icon where you will find the option to Redeploy that specific build once again

aero8991 Over a year ago

weird solution but this worked for me. I had to actually select Other and then select Next again.

Filip Malek Over a year ago

Ideally you'd configure output directory yourself and all that but just selecting next.js is definitely simpler as Vercel does most, if not all, of the work for you :)

CarlThePerson · Accepted Answer · 2021-01-20 20:53:26Z

32

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.

answered Jan 20, 2021 at 20:53

CarlThePerson

5284 silver badges8 bronze badges

2 Comments

Brendan Over a year ago

Worked for me! Updated the 'Root Directory' of my project on Vercel and it worked again.

Anuraag Barde Over a year ago

try removing vercel.json if thats is an issue, github.com/t3-oss/create-t3-app/issues/912

user22975796 · Accepted Answer · 2023-11-25 06:34:11Z

5

Redeployed it with choosing nextjs as framework

answered Nov 25, 2023 at 6:34

user22975796

Comments

Mohit Chandel · Accepted Answer · 2021-01-18 09:03:28Z

3

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

answered Jan 18, 2021 at 9:03

Mohit Chandel

1,93414 silver badges35 bronze badges

2 Comments

siva Over a year ago

I am using the Vercel Github integration for deployment. I think it builds it from scratch every time I deploy. I have just compared it with other projects which I have deployed successfully and with them I didn't provide a now.json. So I doubt it's necessary.

Mohit Chandel Over a year ago

@siva try by adding now.json. Here is a little help => docs-git-update-lambda-serverless-function.zeit.now.sh/docs/v2/…

Haris Khan · Accepted Answer · 2022-01-07 16:46:26Z

3

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

answered Jan 7, 2022 at 16:46

Haris Khan

3891 gold badge2 silver badges12 bronze badges

1 Comment

Martin Capodici Over a year ago

This is what caused it for me - not sure why it changed from Next.js but it did.

Shirshak kandel · Accepted Answer · 2023-05-24 09:43:40Z

2

video reference codegrepper.

1)go to the project. then settings => click general tab => at build and development settings=> choose next.js from others in the framework preset

2)again redeploy the project

3)It will work

answered May 24, 2023 at 9:43

Shirshak kandel

6187 silver badges15 bronze badges

Comments

digiwand · Accepted Answer · 2021-08-30 05:04:35Z

0

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

edited Aug 30, 2021 at 5:04

answered Aug 30, 2021 at 4:54

digiwand

1,3461 gold badge13 silver badges19 bronze badges

Comments

Or Assayag · Accepted Answer · 2023-04-21 12:15:42Z

0

I had the same issue. My bug was this: Cannot destructure property 'store' of 'useReduxContext(...)' as it is null

If you are using redux, make sure your store provide is on the pages/_app.js level, not in the pages/index.js file, like this:

import { Provider } from 'react-redux';
import '../assert/css/master.scss';
import store from '../store/store';

export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

answered Apr 21, 2023 at 12:15

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

Comments

John Abraham · Accepted Answer · 2023-05-08 09:37:21Z

0

try and change your file with jsx to js it solve my own issue

answered May 8, 2023 at 9:37

John Abraham

212 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Abel Ananta · Accepted Answer · 2023-08-10 05:46:04Z

0

In some cases, if all the solution above didnt work. You can try to do redeploy but try to change the check on "Use existing Build Cache".

In my case, i have a 404 Page Not Found issues only on naked domain (it works fine on www domain), then I try redeploy with checking "Use existing Build Cache", and it solved

answered Aug 10, 2023 at 5:46

Abel Ananta

1

Comments

user30972680 · Accepted Answer · 2025-07-05 18:12:04Z

0

I had been looking for a solution for 2 whole days, and after trying literally everything (apart from this one setting), I had to go to Vercel > Project Settings > Build and Deployment Tab > Framework Settings and changed it from 'Other' to 'Next.js'. This FINALLY fixed it for me.

answered Jul 5 at 18:12

user30972680

1

1 Comment

Jeremy Caney Jul 5 at 18:27

I’m glad to hear you found an answer here on the Stack Overflow community, but please be sure to reserve the Answers feature for actual answers. While I’m sure other contributors appreciate your gratitude, the best way to express that gratitude is to upvote their answer. You’ll need to gain some reputation here on Stack Overflow before you’re able to do that; you can do that by suggesting edits to answers or contributing useful posts to the community.

Collectives™ on Stack Overflow

NextJS deployed to Vercel: 404 page not found

11 Answers 11

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

2 Comments

Comments

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related