Hi,
I’m working on a project where I’ve separated my Next.js frontend and Express.js backend into two distinct folders within the same repository. I want to deploy both on Vercel while keeping this structure intact. Here's a quick overview of my setup:

Project Structure

my-app/
│
├── client/         # Contains the Next.js app
│   ├── pages/
│   ├── public/
│   ├── package.json
│   └── next.config.js
│
├── server/         # Contains the Express.js server
│   ├── routes/
│   ├── server.ts
│   └── package.json
│
├── vercel.json     # Vercel configuration file
└── package.json    # Root package.json for managing scripts

My Goal

1. Serve the Next.js app under the root domain (e.g., /).


2. Serve the Express.js API under /api/.


3. Ensure both the frontend and backend can be deployed seamlessly on Vercel while keeping them in separate folders.



Vercel Configuration

Here’s the vercel.json configuration I’m currently using:

{
  "version": 2,
  "builds": [
    {
      "src": "client/package.json",
      "use": "@vercel/next",
      "config": { "distDir": "client/.next" }
    },
    {
      "src": "server/server.ts",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "^/api/(.)",
      "dest": "server/server.ts"
    },
    {
      "src": "/_next/(.)",
      "dest": "client/_next/$1"
    },
    {
      "src": "/(.)",
      "dest": "client/$1",
      "continue": true
    },
    {
      "handle": "filesystem"
    }
  ]
}

Issues/Questions

1. Is this the best way to configure Vercel for a project with this structure?


2. Are there any optimizations or changes you’d recommend for smoother deployment and performance?


3. Is the routing configuration in the vercel.json file optimal for handling both Next.js and the Express.js API?