Vercel deployment issue with Nuxt.js API endpoints returning 404

Other Questions API
1

I’m having trouble with my Nuxt application after deploying it to Vercel. My API routes keep returning 404 errors like “Cannot GET /api/users” when I try to access them. The deployment seems successful and there are no error messages in the Vercel logs, but all my API endpoints are unreachable. Local development works fine without any issues.

My vercel.json configuration:

{
  "version": 2,
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api" }
  ],
  "builds": [
    {
      "src": "api/**/*.js",
      "use": "@vercel/node"
    },
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["api/**"]
      }
    }
  ]
}

nuxt.config.js setup:

// API middleware configuration
serverMiddleware:
  process.env.NODE_ENV === 'production'
    ? []
    : [
        { path: '/api', handler: '~/api/index' },
        { path: '/api/users', handler: '~/api/users' }
      ],

Sample API file (/api/users.js):

import express from 'express'
import bodyParser from 'body-parser'

const router = express()
router.use(bodyParser.json())

router.get('/', (request, response) => {
  response.status(200).json({ message: 'users retrieved' }).end()
})

router.post('/', (request, response) => {
  response.status(200).json({ message: 'user created' }).end()
})

export default router
2

check your build output folder after deploymnt - vercel’s probably not finding your api files. delete the builds section from vercel.json and stick with @nuxtjs/vercel-builder’s default config. it handles api routes automaically without any extra setup.

3

Your vercel.json config is conflicting with Nuxt’s API routing. You’re requesting Vercel to treat your API files as standalone Node.js functions, but they are also set to run as Nuxt server middleware, which is causing the issues. To resolve this, relocate your API files from /api/users.js to /server/api/users.js, and use Nuxt’s event handler format instead of the Express syntax. This adjustment works better with Vercel’s auto-deployment features. I faced a similar issue, and this approach resolved it for me.

4

Your conditional serverMiddleware setup is the problem. You’re excluding API routes in production - that’s why they work locally but break on Vercel. Just remove the environment check and let serverMiddleware run in production too. Your vercel.json has unnecessary routing rules since @nuxtjs/vercel-builder handles API routing automatically. I hit this same issue last month and removing that production condition from serverMiddleware fixed it instantly. Your Express setup looks fine, so it’s definitely the middleware registration causing this.