将含根目录共享文件夹的Next.js TS项目部署至Vercel遇阻

第一步：纠正路径拼写错误 #

你的项目目录是/universal-packages，但tsconfig和next.config.js中都误写为packages-universal，这会导致构建时无法定位到共享文件夹，先修正这两处：

修正tsconfig.json #

{
  "compilerOptions": {
    // ...其他配置
    "paths": {
      "shared/*": ["universal-packages/shared/*"] // 把packages-universal改成universal-packages
    },
    "baseUrl": ".."
  },
  "include": [
    "pages",
    "src",
    "types",
    "constants",
    "../universal-packages/shared" // 同样修正路径
  ],
  "exclude": ["node_modules"]
}

修正next.config.js #

const path = require("path");
module.exports = {
  productionBrowserSourceMaps: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      shared: path.resolve(__dirname, "../universal-packages/shared"), // 修正路径
    };
    config.module.rules.push({
      test: /\.tsx?$/,
      include: path.resolve(__dirname, "../universal-packages/shared"), // 修正路径
      use: "babel-loader",
    });
    return config;
  },
};

方案一：调整Vercel构建配置，以项目根目录为构建起点 #

Vercel如果默认选择/client作为项目根目录，会忽略上级目录的universal-packages，需要把整个项目根目录设为构建根目录：

1. 打开Vercel控制台，进入你的项目设置页面
2. 找到「General」→「Build & Development Settings」
3. 设置「Root Directory」为/（项目根目录）
4. 设置「Build Command」为cd client && npm run build
5. 设置「Output Directory」为client/.next
6. 保存配置后重新触发构建

这样Vercel会拉取完整的项目代码（包括universal-packages），再进入client目录执行构建，就能正确识别共享文件夹了。

方案二：用npm Workspaces管理共享模块 #

将universal-packages/shared设为本地npm包，通过workspaces让client自动关联：

1. 在项目根目录创建package.json：

{
  "name": "your-project-monorepo",
  "private": true,
  "workspaces": [
    "client",
    "universal-packages/shared"
  ]
}

2. 在universal-packages/shared目录下创建package.json：

{
  "name": "shared",
  "version": "1.0.0",
  "private": true
}

3. 在client/package.json中添加依赖：

{
  "dependencies": {
    // ...其他依赖
    "shared": "workspace:*"
  }
}

4. 执行npm install，npm会自动把shared包链接到client/node_modules中
5. 此时可以简化tsconfig和next.config的配置：
   • tsconfig中可以移除paths配置，直接用import type { Personality } from 'shared/types'
   • next.config中可以移除alias配置，因为npm workspace已经处理了模块解析

这种方式更符合monorepo的最佳实践，Vercel会自动识别workspaces并正确构建。

方案三：确保共享文件夹已提交到Git #

检查项目根目录的.gitignore文件，确保没有添加universal-packages或其子目录的忽略规则。如果共享文件夹没被提交到Git，Vercel拉取代码时自然无法获取到它。

执行以下命令确认并提交：

git add universal-packages/
git commit -m "Add shared universal packages"
git push

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