My project blog works fine locally but pages that resolve locally result in a 404 on vercel

[quick007]

Current versus Expected behavior

My app deploys fine locally, but when pushed to vercel, all of my blog pages resolve to a 404. Only thing I can think of would be the fact that I use windows locally but (I assume) edge functions run on linux.

Code, configuration, and steps that reproduce this issue

My repo is open source on github.

Project information

Deployment URL: https://blog-inky-three-22.vercel.app/
Environment (local, preview, production): Production
Project Framework: Next.js
Build Settings:
  Framework Preset: Next.js
  Build Command (if not default):
  Output Directory (if not default):
  Install Command (if not default):
Node/Runtime Version: 20.x (locally 22.x, but I doubt this is causing an issue)
Package Manager: pnpm
Relevant Packages: next-mdx-remote (?)

[pawlean (Pauline P. Narvas)]

Hi, @quick007! Welcome to the Vercel Community

We wrote a community post about how to debug these errors, could you have a look and let us know how you get on?

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…

[quick007]

Hi pawlean!

I tried my best to follow those steps, but the vercel build command doesn’t work locally because I have a windows machine (likely also why it works locally with my pnpm build and start commands, but not on vercel). Please note that my project is properly deployed, it’s just that some pages are returning 404s that work fine locally.

When looking at the output in the source tab, I can see that the pages are there, but they have the code for slashes instead of a proper / and when I try to click on the file, I get a weird error (see screenshots below).

Output file structure:

Error when I try to click on one:

[amyegan]

Thanks for sharing the repo! That was very helpful.

It looks like a problem with the MDX configuration. I made a few changes based on the Next.js MDX configuration doc to get it working in a preview deployment:

• install @next/mdx (other needed packages were already installed)
• modify next.config.mjs

  import createMDX from '@next/mdx'
   
  /** @type {import('next').NextConfig} */
  const nextConfig = {
    // Configure `pageExtensions` to include markdown and MDX files
    pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
    // Optionally, add any other Next.js config below
  }
   
  const withMDX = createMDX({
    // Add markdown plugins here, as desired
  })
   
  // Merge MDX config with Next.js config
  export default withMDX(nextConfig)
  

You can find the full details here:

Configuring: MDX | Next.js

[quick007]

Hi Amy,

I’m loosely basing my repo on the example that vercel made. That example uses the package next-mdx-remote, which seems to be a more comprehensive MDX solution for blogs and works better for the way that I want to structure my content.

I did try using the @next/mdx package, but it would require me to refactor a decent amount of my code and overall isn’t a super ideal solution.

Again, my blog works without error locally, but doesn’t work on vercel.

[amyegan]

Thanks for sharing that additional context. The dev command doesn’t work exactly the same as a deployment. It may work locally because the files are still present on your local computer even if they’re not included in a build. It still appears to be a configuration difference as the example project does work as expected.

It looks like there is quite a bit different between your example and that starter project. I recommend reviewing the things you changed from that starter project to identify which difference is causing the odd build output.