404 Error on Vercel Deployment Despite Successful Build

[drosshole (Andrew Kolumbic)]

Hello everyone,

I’m running into a persistent 404 on my Next.js (App Router) project after deploying to Vercel. The build logs show a successful compile with a valid root route (/), and everything appears fine locally. However, visiting either my custom domain or the *.vercel.app subdomain always returns a 404.

Here’s what I’ve already tried:

1. Root Route Check: Confirmed I have src/app/page.tsx with a default export (export default function Home() {…}).

2. DNS Configuration:

• Apex domain points to 76.76.21.21 (A record)

• www subdomain is set as a CNAME to my .vercel.app

• Removed any circular references or extra CNAMEs.

3. Vercel Project Settings:

• No “Root Directory” is set, because my code is in the repository root (with next.config.js and package.json there).

• The domain is confirmed as “Valid Configuration” in Vercel.

• I removed and re-added the domain to ensure no stale settings.

4. Production Deployment: Double-checked that I’m deploying on the main branch and that the latest deployment is indeed marked as “Production.”

5. Local Production Test: Ran npm run build && npm run start locally, and the site serves correctly on http://localhost:3000.

Despite all this, visiting my domain or the .vercel.app link still yields a 404. If anyone has run into a similar issue or has suggestions for what else to check, I’d really appreciate the help!

Thank you in advance!

[system]

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

[pawlean (Pauline P. Narvas)]

Hey, Andrew! Welcome to the Vercel Community

Could you share your URL with us?

[drosshole (Andrew Kolumbic)]

Hey Pauline, sure. The url is https://www.betonyourself.today/

[pawlean (Pauline P. Narvas)]

Did you try going through the community post?

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are many possible causes, and the absence of something can be tricky debug if you don’t know where to look. Here are some things you can do to find the cause and fix it. Debugging Tips Check the error code If you see a mostly white screen with 404: NOT_FOUND along with a Code and and ID then you can click the blue info box below the error deta…

[drosshole (Andrew Kolumbic)]

I did, yes. I did notice I didn’t have any sort of index file in my output, but I don’t know why that isn’t there. I have three other websites I have deployed with Vercel, and while they all have an index in their output, I can’t actually find that file in my codebase. I assume that is something Vercel creates during the build process, but that’s just a guess.

[anshumanb (Anshuman Bhardwaj)]

Hi @drosshole, sorry that you’re facing this issue.

Your project doesn’t seem to have the Next.js preset selected. Using the Next.js preset and redeploying your application should fix this issue.

[drosshole (Andrew Kolumbic)]

This did it, thanks so much!