Next.js Deployed to Vercel returns a 404 not found
I'm trying to deploy a Next.js app to Vercel, it's a portfolio with only one page(index) and a couple of API routes. Vercel dashboard displays that the deployment is successful but when I visit the app it displays the layout component(the navbar and the footer but some styles are lost) with a 404 page like the attached image
. I tried to deploy with getStaticProps and with getServerSideProps and ended up with the same result. The API routes are working fine though both in SSG and SSR, I can retrieve the data from them weather from the browser or postman for example. I've been searching for a while now and this issue here is the most relative one to mine, but I tried all solution mentioned in it and non of them worked for me. I made sure that the framework preset is next.js and that the root directory is correct, the app isn't served through a sub directory. Also I'm using a variable for the domain name stored in the .env file, I tried to deploy and leave it as the default(localhost:3000) and tried to change it to on of the vercel auto assigned domain names and tried to add the variable from the project settings on vercel, and also tried to deploy without it at all and all the scenarios leaded to the same result(the 404 page and the APIs are working fine). This is the first time I deploy on vercel, I tried to contact them but I received no answers, I guess because I'm on a hobby tier. This is the project repo. The app works fine in development and also when I build and start the server locally.
The issue is that you're calling internal endpoints (e.g. functions on api folder) in getStaticProps. This is a Next.js anti-pattern (More about this on the docs). The reason being is that getStaticProps fetches the necessary data required to build the static page on build-time, but at this point of the process, the serverless functions contained on the api folder have not been deployed yet. You're getting a 404 page because you are using a try/catch block in getStaticProps, so when axios throws, catch block takes the control and returns notFound: true.
- How to fix Next.js 14.1 prerendering Error
- Error when add I18n in nextJS Page Router
- Multiple root layouts cause a full page load nextjs 14
- next js internationalization and auth
- How to handle .env.local in a next js typescript file?
- Adding Favicon to NextJs App router application
- NextRouter was not mounted Next.JS
- Next.js 14.2.4 generateStaticParams throw error
- how to deploy custom github branch on vercel
- Custom sign in page not redirecting correctly in next auth
- Next.js Firebase Hosting 404 error on all except index.html
- Best way to include reusable SVG in React
- Server action function not being called Nextjs Shadcn React hook form
- Kill a NextJs process in terminal
- NextJS Middleware causing "localhost redirected you too many times" error
- Getting a 504/502 error on api requests in Nextjs deployed on Vercel
- 2 PUT api request in same file in NEXT js
- res.on("searchEntry") from Ldap.js does not returns result in Next.js Production mode
- Logout from next-auth with keycloak provider not works
- Is there a way to pass my middleware.ts const that checks if user is logged in to other api, domain logic or page.tsx? (open to new suggestions too)
- NextJS Images are not rendered on Vercel
- How to make NextJS Image component 100% height and width for its parent div?
- Set Request Cookie in NextJS v14 Middleware
- Next-Auth implementation not working properly. getting 404 error everywhere
- What is a digest property?
- Module '"@uploadthing/react"' has no exported member 'FileWithPath'
- Next.js internationalisation: all the routes throws "404 not found" for only one locale while I can access the other locale's routes
- How to navigate when using `Next-intl` and `next/link`
- Nextjs useSearchParams is not updated correctly
- Margin pushing sidebar out of the screen