404: NOT_FOUND on Vercel deployment

Question

I have build a web3 application using chakra-UI and three.js. I have added a metamask integration to the website, which helps to mint the NFTs on smart contract.

When I do,

npm run dev

On my machine, my code is running extremely smoothly. I don't see any errors on my localhost:3000 whereas when I am deploying the website using vercel, I am getting this error again and again which says Code NOT_FOUND Here's the screenshot of that error:

I deployed the website through my VSCode terminal using the

vercel

command.

I selected everything as default which came after executing this command.

Click here to learn more about this error didn't helped either.

I also tried to deploy this by going physically on vercel website and importing the github repo, but that also didn't worked.

The error page URL is:- https://minting-website-frontend.vercel.app/

Can anyone please help me overcome this error, I am stuck here for so long now

Audio

Check the "FRAMEWORK PRESET" under "Build & Development Settings" inside your Project Settings, so that it matches the one you're using locally (Next.js). – Pelota

@JuanMarco Yes, I added Next.js in my framework preset and redeployed the website again. But there's still not any development on the problem. It still shows error 404 – Audio

Answer 1

I've experienced this, and what I did to solve the problem was:

1. create a vercel.json file in my project.
2. Enter the following code in the vercel.json file

{
    "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

3. re-deploy the project

Nickola

Please explain this – Tartarous

I was several hours with this issue, thanks mate! – Patricepatrich

I found info here but not sure how actually it fixes the 404 issue: vercel.com/docs/concepts/edge-network/rewrites – Stricture

Does anyone know why this is working with single slash, but don`t with two slashes? I mean "website/account" - OK, ""website/account/profile" - 404? – Nenitanenney

This didn't work but setting the framework preset did. – Terpene

Answer 2

Go to vercel project settings->General->Build & Development Settings and choose whatever framework your project is using in my case My project was using Next js but it was chosen Others. So when i changed it from others to Next Js problem solved

Antung

You can also add a vercel.json file to the root of your project add your framework there. vercel.com/docs/projects/project-configuration – Terpene

Answer 3

Are you sure you're looking at the good URL?

You need to run vercel --prod to deploy to production, otherwise you're just deploying a preview version.

Can you please share the output of the vercel command in your terminal?

Kristofer

Yeah, well apparently there were some issues in the code. First, there was a spelling mistake in package.json, for build:next-build, I have no Idea how there can be a spelling mistake in this, lol(It's default when we create a next app) So probably that was the reason that it was not showing anything. After doing this, I ran npm run build which showed certain warnings, like passHref missing, unused imports and one const. component was initialised with small letter(e.g I wrote "home", instead of "Home"). Than I ran vercel and selected "Next.js" as suggested by @JuanMarco; Successful! – Audio

Answer 4

I have the same issue but with a project build with Svelte (not SvelteKit).

what worked for me was:

in Vercel dashboard, open the project. Goto project settings. In Build & Development Settings section, change Framework Preset to other.

I know there is Svelte option too but it was not worked for me. I am a back end dev and still new to the front end stuff but that was the fix for mine.

Salmagundi

Answer 5

I just dealt with this issue for too long but my issue was that my pages weren't pushed to production. Use this as a reminder to ensure the pages you're linking to are also in production

Flabby

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Paste