如何使用npm concurrently包同时运行Next.js前端应用与Express后端服务器

你的项目结构和package.json基础配置已经离目标很近了！只需要确认几个关键细节，就能让前后端同时在指定端口顺利启动：

1. 确保Express服务器监听5000端口 #

打开根目录下的server.js，确认服务器的端口配置正确指向5000（支持环境变量兜底更灵活）：

const express = require('express');
const app = express();

// 优先读取环境变量，默认用5000端口
const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
  console.log(`✅ Express Server running on port ${PORT}`);
});

如果你的.env文件用于管理环境变量，记得添加端口配置：

PORT=5000

2. 锁定Next.js前端的3000端口 #

Next.js默认使用3000端口，但为了避免意外修改，建议在frontend目录的package.json中明确指定端口：

{
  "scripts": {
    "dev": "next dev -p 3000", // 开发模式强制用3000端口
    "build": "next build",
    "start": "next start -p 3000" // 生产模式也保持端口一致
  }
}

另外注意：根目录package.json中的frontend脚本，开发环境建议调用Next.js的dev命令（而非默认的start，start是生产启动命令），修改后如下：

"scripts": {
  "frontend-install": "npm install --prefix frontend",
  "start": "nodemon server.js",
  "server": "nodemon server.js",
  "frontend": "npm run dev --prefix frontend", // 改为调用开发环境命令
  "dev": "concurrently \"npm run server\" \"npm run frontend\""
}

3. 优化concurrently日志体验（可选） #

默认配置已经能正常启动双服务，但可以给日志加上标签和颜色，方便区分前后端的输出：

"dev": "concurrently \"npm run server\" \"npm run frontend\" --names \"SERVER,FRONTEND\" --prefix-colors \"blue,green\""

启动验证 #

先确保依赖安装完整：

# 安装根目录后端依赖
npm install
# 安装前端依赖
npm run frontend-install

然后启动双服务：

npm run dev

此时终端会分别输出：

• 蓝色标签的Express日志：SERVER: ✅ Express Server running on port 5000
• 绿色标签的Next.js日志：FRONTEND: ready - started server on 0.0.0.0:3000

常见问题排查 #

• 如果某个服务启动失败，先单独运行对应命令排查：npm run server或npm run dev --prefix frontend，确认单服务能正常启动。
• 端口被占用时，关闭占用端口的程序，或修改对应服务的端口号。

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