CODEWITHSUNDEEP
next.jsvercel
siva
siva

Reputation: 1533

NextJS deployed to Vercel: 404 page not found

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.

Upvotes: 46

Views: 63361

Answers (10)

user22975796
user22975796

Reputation:

Redeployed it with choosing nextjs as framework

Upvotes: 5

Abel Ananta
Abel Ananta

Reputation: 1

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

Upvotes: 0

Shirshak kandel
Shirshak kandel

Reputation: 609

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

Upvotes: 2

John Abraham
John Abraham

Reputation: 21

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

Upvotes: 0

Or Assayag
Or Assayag

Reputation: 6356

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

Upvotes: 0

Anirudh
Anirudh

Reputation: 3428

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

Upvotes: 96

Haris Khan
Haris Khan

Reputation: 389

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

Upvotes: 3

digiwand
digiwand

Reputation: 1348

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

Upvotes: 0

CarlThePerson
CarlThePerson

Reputation: 518

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.

Upvotes: 31

Mohit Chandel
Mohit Chandel

Reputation: 1916

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

Upvotes: 3

Related Questions