如何在Vercel上同时部署Next.js与Storybook？

方案1：单项目双部署（同域名分路径访问） #

适合不想调整项目结构的场景，通过自定义构建命令和路由配置，让主应用与Storybook共享同一个Vercel项目，分别通过根路径和/storybook路径访问。

1. 确认Storybook构建输出目录
   默认情况下Storybook构建后会输出到storybook-static目录，可在.storybook/main.js里明确指定：

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  core: {
    builder: '@storybook/builder-webpack5',
  },
  outputDir: 'storybook-static'
};

2. 配置同时构建的脚本
   在项目根目录的package.json中添加vercel-build脚本，让Vercel部署时同时构建Next.js和Storybook：

{
  "scripts": {
    "build": "next build",
    "build-storybook": "storybook build",
    "vercel-build": "npm run build && npm run build-storybook"
  }
}

3. 设置Vercel路由规则
   创建或修改根目录的vercel.json，指定路由映射，让/storybook路径指向Storybook的静态文件：

{
  "buildCommand": "npm run vercel-build",
  "outputDirectory": ".next",
  "routes": [
    {
      "src": "/storybook/(.*)",
      "dest": "/storybook-static/$1"
    },
    {
      "src": "/(.*)",
      "dest": "/$1"
    }
  ]
}

部署完成后，主应用访问https://your-project.vercel.app，Storybook访问https://your-project.vercel.app/storybook。

方案2：Monorepo双项目部署（独立访问） #

如果希望两个应用完全独立（比如各自用独立域名），可以用Monorepo结构共享代码，无需复制项目。

1. 调整项目结构
   将Next.js和Storybook拆分为子应用，共享组件放在公共目录：

your-project/
├── apps/
│   ├── web/          # Next.js主应用，包含自身的next.config.js、package.json
│   └── storybook/    # Storybook目录，包含.storybook配置、自身package.json
├── packages/
│   └── ui-components/ # 共享组件库，被web和storybook依赖
└── package.json

2. 配置两个Vercel项目

• 登录Vercel创建第一个项目，选择代码仓库后指定根目录为apps/web，Vercel会自动识别Next.js并完成部署。
• 创建第二个项目，同样选择代码仓库，指定根目录为apps/storybook，在项目设置里修改构建命令为npm run build-storybook，输出目录设置为storybook-static。

3. 配置工作区共享依赖
   在根目录的package.json里添加工作区配置，确保子应用能访问共享组件：

{
  "private": true,
  "workspaces": [
    "apps/*",
    "packages/*"
  ]
}

方案3：分支独立部署 #

如果接受用分支区分部署，可采用以下方式：

• 主分支（main）保持默认配置，部署Next.js应用。
• 创建storybook分支，在该分支修改vercel.json：指定构建命令为npm run build-storybook，输出目录为storybook-static。
• 在Vercel项目设置中开启分支部署，指定storybook分支自动部署，访问路径为Vercel自动生成的分支域名（如https://your-project-storybook.vercel.app）。

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