如何在Vercel部署Next.js构建产物(.next目录)而无需完整源码

先明确项目类型 #

Next.js不同渲染模式的部署要求不同：

• SSR/API路由项目：无法仅靠.next文件夹部署，因为Vercel需要源码中的服务端逻辑和依赖包来运行服务，必须推送完整源码（至少包含package.json、next.config.js及相关服务端代码）。
• SSG/ISR项目：可以仅部署构建产物，但需要按以下步骤调整：

针对SSG/ISR项目的修复步骤 #

方案1：使用next export生成纯静态文件（推荐） #

1. 本地执行构建导出命令：

   next build && next export
   

   这会生成out文件夹，包含所有可直接部署的静态HTML、CSS和JS文件。
2. 将out文件夹推送到GitHub仓库（替换原来的.next）。
3. 在Vercel中修改项目设置：
   • 安装命令：echo "Dependencies skipped"
   • 构建命令：echo "Build skipped"
   • 输出目录：out
4. 重新触发部署，此时Vercel会直接托管out中的静态文件，不会出现404。

方案2：直接部署.next文件夹（适用于需要保留ISR缓存的场景） #

如果必须用.next部署，需要补充必要文件并调整Vercel配置：

1. 在GitHub仓库中添加以下文件（从本地项目复制）：
   • package.json：至少包含next依赖的版本号（例如"next": "^13.4.0"），Vercel需要用对应版本的Next.js运行时。
   • next.config.js：如果有自定义配置（如路由重写、环境变量），必须包含。
   • public文件夹：如果项目中有静态资源（图片、字体等），需一并推送。
2. 修改Vercel项目设置：
   • 安装命令：npm install next（或yarn add next，根据你的包管理器），确保Vercel安装Next.js运行环境。
   • 构建命令：echo "Using pre-built .next folder"
   • 输出目录：.next
3. 重新部署，Vercel会使用安装的Next.js运行时加载.next中的构建产物。

排查额外问题 #

• 检查Vercel部署日志，确认是否有依赖缺失、文件找不到的报错。
• 确保.next文件夹是完整的本地构建产物（执行next build后生成的完整目录，不要手动修改或删除其中文件）。

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