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- dbapi.tsI 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.
Best Answer
Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.
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.
Edited
Try to deploy usingnow --prod --forceThe --force flag will clear your build cache (in production) and force production push.If still no working then make sure to add now.json
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
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
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
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>);}try and change your file with jsx to js it solve my own issue
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