36

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.

0

10 Answers 10

54

Go to Project Settings

Change Framework preset from Other to Next.js

Redeploy the project.

2
  • 1
    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 at 12:30
  • weird solution but this worked for me. I had to actually select Other and then select Next again.
    – aero8991
    Nov 22 at 1:43
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.
3
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

2
  • 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, 2021 at 9:16
  • @siva try by adding now.json. Here is a little help => docs-git-update-lambda-serverless-function.zeit.now.sh/docs/v2/… Jan 18, 2021 at 9:19
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

1
  • This is what caused it for me - not sure why it changed from Next.js but it did. May 6, 2022 at 5:39
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

1

Redeployed it with choosing nextjs as framework

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

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

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

1
  • 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.
    – Community Bot
    May 9 at 12:24
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.