如何将现有Next.js与Express.js整合进单体仓库并分平台部署？

一、初始化Nx Monorepo #

1. 创建空的Nx工作区：

npx create-nx-workspace@latest my-monorepo --preset=empty --packageManager=npm

2. 进入工作区目录：

cd my-monorepo

二、导入现有Next.js应用到Nx #

1. 将现有Next.js项目的源码（排除node_modules、.next、dist等临时目录）复制到工作区的apps/next-app目录
2. 安装Nx的Next.js插件：

npm install -D @nx/next

3. 为Next应用生成Nx配置：

nx g @nx/next:init --project=next-app

4. 打开apps/next-app/project.json，确认build、serve等目标的命令指向Next.js的对应脚本（Nx通常会自动配置）
5. 测试构建：

nx build next-app

三、生成Express.js应用 #

用Nx CLI快速生成带配置的Express项目：

nx g @nx/express:app api-server --directory=apps/api-server

生成后，将原本Next.js中耗时较长的API路由代码迁移到apps/api-server/src/app/routes目录，调整逻辑适配Express的路由写法。

四、创建共享代码库 #

1. 生成共享的工具/类型库：

nx g @nx/js:lib shared-utils --directory=libs/shared-utils --bundler=tsc --importPath=@my-monorepo/shared-utils

2. 在libs/shared-utils/src/lib下创建：
   • types.ts：存放跨应用共享的TypeScript接口、类型定义
   • utils.ts：存放通用工具函数（如数据格式化、验证逻辑等）
3. 在Next.js或Express.js中直接引用共享代码：

// Next.js组件/API中
import { UserType, formatTimestamp } from '@my-monorepo/shared-utils';

// Express路由中
import { ApiResponse, validatePayload } from '@my-monorepo/shared-utils';

Nx会自动处理TypeScript路径映射，无需手动修改tsconfig.json。

五、分平台部署配置 #

1. Vercel部署Next.js应用 #

• 在Vercel控制台新建项目，选择monorepo根目录
• 构建配置：
  • Framework Preset：选择Next.js
  • Root Directory：填写apps/next-app
  • Build Command：nx build next-app
  • Output Directory：dist/apps/next-app/.next
• 复制原Next项目的环境变量到Vercel环境变量面板
• 部署完成后，将Next应用中原本指向长耗时API的请求地址替换为Railway上Express服务器的域名

2. Railway部署Express.js应用 #

• 在Railway控制台新建项目，选择monorepo根目录
• 启动配置：
  • 启动命令：nx build api-server && node dist/apps/api-server/main.js（先构建再启动）
  • 若需要热重载开发环境，可使用nx serve api-server
• 添加Express应用所需的环境变量（如数据库连接字符串、密钥等）
• 部署完成后，复制Railway分配的服务器域名，用于Next应用的API请求跳转

六、关键注意事项 #

• 共享库代码需保持无环境依赖：不要在共享工具中引用Next.js或Express的特定API，确保代码可跨应用复用
• 启用Nx构建缓存：部署时添加--cache参数（如nx build next-app --cache）可大幅提升构建速度
• 测试跨应用代码同步：修改共享库代码后，分别运行nx build next-app和nx build api-server，确认代码更新已同步到两个应用

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