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.

score 41 · Answer 1 · answered May 14 '22 at 07:46

41

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

answered May 14 '22 at 07:46

Anirudh

2,767
5
69
119

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 – Itay Tur Jun 23 '23 at 12:30

score 30 · Accepted Answer · answered Jan 20 '21 at 20:53

30

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 '21 at 20:53

CarlThePerson

493
4
8

1

Worked for me! Updated the 'Root Directory' of my project on Vercel and it worked again. – Brendan Sluke Dec 29 '21 at 14:25
try removing vercel.json if thats is an issue, https://github.com/t3-oss/create-t3-app/issues/912 – Anuraag Barde Dec 31 '22 at 11:36

score 3 · Answer 3 · answered Jan 18 '21 at 09:03

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 '21 at 09:03

Mohit Chandel

1,838
10
31

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. – siva Jan 18 '21 at 09:16
@siva try by adding now.json. Here is a little help => https://docs-git-update-lambda-serverless-function.zeit.now.sh/docs/v2/advanced/configuration/ – Mohit Chandel Jan 18 '21 at 09:19

score 3 · Answer 4 · answered Jan 07 '22 at 16:46

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 07 '22 at 16:46

Haris Khan

389
1
2
12

This is what caused it for me - not sure why it changed from Next.js but it did. – Martin Capodici May 06 '22 at 05:39

score 2 · Answer 5 · answered May 24 '23 at 09:43

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 '23 at 09:43

Shirshak kandel

328
3
7

digiwand · Answer 6 · 2021-08-30T05:04:35.710

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

score 0 · Answer 7 · answered Apr 21 '23 at 12:15

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>
  );
}

score 0 · Answer 8 · answered May 08 '23 at 09:37

0

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

answered May 08 '23 at 09:37

John Abraham

21
2

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](/help/how-to-answer). – Community May 09 '23 at 12:24

score 0 · Answer 9 · answered Aug 10 '23 at 05:46

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

NextJS deployed to Vercel: 404 page not found

9 Answers9

Linked