How to Deploy a Next.js Frontend and Express API on Vercel

Vercel hosts Next.js natively and can run an Express API as a serverless function. Here is a setup that works.

Two projects, one repo

Create two Vercel projects pointing to two folders: the Next.js client and the Express server. Set the root directory for each in the project settings.

Serverless entry for Express

Express must be exported as a handler instead of calling listen.

// api/index.ts
import app from '../src/app';
export default app;

{
  "version": 2,
  "builds": [{ "src": "api/index.ts", "use": "@vercel/node" }],
  "routes": [{ "src": "/(.*)", "dest": "/api/index.ts" }]
}

Environment variables

Add your database URL, JWT secrets and allowed origins in the Vercel dashboard for each project. Redeploy after changing them; they are baked in at build or cold start.

Database access

Serverless functions open many short connections. Use a managed database such as MongoDB Atlas or a pooled PostgreSQL URL, and allow Vercel's IPs, which in practice means allowing access from anywhere and relying on strong credentials.

Cookies across domains

If the frontend and API live on different domains, proxy API calls through Next.js rewrites so cookies stay first-party:

async rewrites() {
  return [{ source: '/api/v1/:path*', destination: `${process.env.API_URL}/api/v1/:path*` }];
}

Debugging a 404 from the API

1. Confirm the latest commit actually deployed.
2. Check that the domain is assigned to the API project.
3. Visit /health directly.
4. Read the function logs for startup errors such as a missing environment variable.

Takeaway

Export the Express app, route everything to one function, keep secrets in project settings and proxy through Next.js for clean cookies.