如何将使用json-server的Next.js项目部署至Vercel？

你的当前方案无法在Vercel上运行，核心原因有两点：

1. Vercel的构建阶段（build）仅用于编译Next.js应用，不会持续运行后端服务。json-server是一个长期运行的进程，在构建阶段启动它会导致构建流程挂起或失败，因为Vercel期望构建任务能正常退出。
2. 你尝试用concurrently同时启动json-server和构建/启动命令，但Vercel的部署流程是先执行build，完成后再执行start，无法在同一部署中运行两个独立的长期服务。

以下是三种可行的解决方案：

方案1：将json-server转换为Next.js API路由 #

这是适配Vercel的最佳方案，因为Next.js API路由是Vercel原生支持的无服务器函数，能完美模拟json-server的功能。

步骤：

• 在项目根目录创建pages/api文件夹（如果不存在）。
• 针对db.json中的每个数据集合，创建对应的API路由文件。例如，若db.json中有posts集合，创建pages/api/posts.js：

import db from '../../db.json';

export default function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      res.status(200).json(db.posts);
      break;
    case 'POST':
      // 模拟创建新数据（注意：内存存储，重启后数据会丢失）
      const newPost = { id: Date.now(), ...req.body };
      db.posts.push(newPost);
      res.status(201).json(newPost);
      break;
    case 'PUT':
      // 模拟更新数据
      const { id } = req.query;
      const index = db.posts.findIndex(post => post.id === parseInt(id));
      if (index !== -1) {
        db.posts[index] = { ...db.posts[index], ...req.body };
        res.status(200).json(db.posts[index]);
      } else {
        res.status(404).json({ message: 'Post not found' });
      }
      break;
    case 'DELETE':
      // 模拟删除数据
      const postId = parseInt(req.query.id);
      db.posts = db.posts.filter(post => post.id !== postId);
      res.status(200).json({ message: 'Post deleted' });
      break;
    default:
      res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

• 更新前端代码中的API请求地址，从http://localhost:5000/posts改为/api/posts。

方案2：静态导入db.json数据（适用于静态内容） #

如果你的应用不需要动态修改数据，仅需展示静态内容，可以直接在组件中导入db.json的数据，无需启动任何后端服务。

示例组件：

import db from '../db.json';

export default function PostsPage() {
  return (
    <div className="posts-container">
      {db.posts.map(post => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </article>
      ))}
    </div>
  );
}

这种方式下，数据会在构建阶段被打包进静态页面，完全不需要后端服务。

方案3：单独部署json-server #

如果你坚持使用独立的json-server服务，可以将其部署到其他平台（如Render、Heroku等），然后修改Next.js应用中的API请求地址为该部署的公网URL。

部署完成后，你的package.json脚本可以保留本地开发用的命令，移除deploy命令：

"scripts": {
  "dev": "concurrently \"npm run json-server\" \"next dev\"",
  "build": "next build",
  "start": "next start",
  "json-server": "json-server --watch db.json --port 5000"
}

Vercel部署时只会执行build和start命令，无需处理json-server。

总结选择建议 #

• 需要动态CRUD接口：选方案1
• 仅展示静态数据：选方案2
• 必须保留独立json-server：选方案3

内容的提问来源于stack exchange，提问作者Джамбулат Кагерманов