Deployed Next.js site shows 404 despite successful build

[ii-johan]

Subject: Website showing 404 Not Found after successful deployment

Current versus Expected behavior

• Current behavior: My website deployed on Vercel at embico-test.vercel.app is showing a “404: This page could not be found” error page.
• Expected behavior: The website should display the content of the root page (/) as it does in my local development environment.

Code, configuration, and steps that reproduce this issue

1. Project Setup: This is a Next.js project using React and TypeScript.
2. Local Environment: The project works correctly when running locally (npm run dev) and is accessible at http://localhost:3000.
3. GitHub Repository: The project source code is hosted on GitHub at https://github.com/ii-johan/my-embico-app. I have recently cleaned up the repository to remove build output folders (_next, .next, out, etc.) and node_modules, ensuring only source files are present.
4. next.config.ts: The project is configured for static site export with the following setting:

const nextConfig: NextConfig = {
  // ... other configs
  output: 'export', // Configured for static export
  // ... other configs
};

5. Vercel Deployment: The project is connected to the GitHub repository, and Vercel automatically triggers deployments on new commits. The latest deployment shows “Deployed (completed)” status.
6. Vercel Logs:

• Build logs show the build process completed successfully with no errors.
• The logs indicate that the root path (/) was prerendered as static content (○ / prerendered as static content).
• Runtime logs show no errors.

7. Steps Taken:

• Confirmed Vercel is connected to the correct GitHub repository (ii-johan/my-embico-app).
• Verified Vercel’s Root Directory setting is correct (empty, matching GitHub root).
• Manually cleaned the GitHub repository via the website to remove build outputs and node_modules.
• Triggered re-deployments on Vercel after cleaning the GitHub repo.
• Cleared smartphone browser cache before accessing the Vercel URL.

Despite a successful build and no runtime errors, and confirming the static export configuration and clean GitHub repo, the deployed site still shows a 404 error. It seems Vercel might not be correctly serving the generated index.html file for the root path.

Project information (URL, framework, environment, project settings)

• Vercel Project URL: https://embico-test.vercel.app (The specific deployment URL is my-embico-lmgawllpr-ii-s-projects.vercel.app, but the primary domain is embico-test.vercel.app)
• GitHub Repository URL: https://github.com/ii-johan/my-embico-app
• Framework: Next.js (Version 15.3.2), React (Version 19.0.0)
• Environment: Production
• Vercel Project Settings: Standard Next.js settings, Root Directory empty, Build Command npm run build, Output Directory automatically detected (should be out due to output: 'export').

[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.

[ashoksrinivasan96]

Hi Johan,

I cloned your code into a brand new project and selected the Framework as “Next.js”, and your website ran successfully.
Could you please navigate to your Project Settings > Build and Deployment > Framework Settings (click here) and select “Next.js”? Redeploying after that should make your deployment work as expected.

Attaching screenshots for your reference.