如何在Vercel部署带独立Node.js后端的Next.js项目？

可以在Vercel部署你的Node.js后端 #

Vercel支持部署独立的Node.js服务，常见实现方式有两种：

方式1：后端单独作为Vercel项目部署 #

• 将server目录单独作为Git仓库，或在现有仓库中创建新的Vercel项目并指定server目录为部署根目录
• 在server目录根目录添加vercel.json配置文件，指定后端入口路径，示例：

  {
    "functions": {
      "api/**/*.js": { "runtime": "@vercel/node@20" }
    },
    "routes": [
      { "src": "/(.*)", "dest": "/api/index.js" }
    ]
  }
  

  （可根据实际后端入口文件路径调整配置）
• 部署完成后，Vercel会为后端项目分配独立域名，比如your-backend.vercel.app

方式2：同一Vercel项目同时部署前后端 #

若不想拆分仓库，可在项目根目录添加vercel.json，通过路由规则区分前后端请求：

{
  "buildCommand": "cd client && npm run build",
  "outputDirectory": "client/.next",
  "functions": {
    "server/**/*.js": { "runtime": "@vercel/node@20" }
  },
  "routes": [
    { "src": "/api/(.*)", "dest": "/server/api/$1.js" },
    { "src": "/(.*)", "dest": "/client/$1" }
  ]
}

这种模式下，后端接口会挂载在前端域名的/api路径下，比如your-frontend.vercel.app/api/xxx

Axios baseUrl配置 #

• 若采用方式1（后端单独部署）：将baseUrl设为后端项目的Vercel域名，示例：

  axios.defaults.baseURL = 'https://your-backend.vercel.app';
  

• 若采用方式2（同项目部署）：直接设为当前域名的/api路径，无需处理跨域：

  axios.defaults.baseURL = '/api';
  

注意：如果是后端单独部署的场景，需要在Node.js服务中配置CORS，允许前端域名的请求；同项目部署则无需额外配置CORS。

内容的提问来源于stack exchange，提问作者ElronKarni