第 10 章：部署与构建优化
10.1 构建与部署概览
Next.js 支持多种部署方式：
| 部署方式 | 是否推荐 | 说明 |
|---|---|---|
| Vercel | ✅ 官方推荐 | 支持 SSR、ISR、Edge Functions |
| Netlify | ✅ | 支持 SSG + API Functions |
| 自建服务器（Node.js 环境） | ✅ | 适合有后端运维经验的项目 |
| 静态导出（Static HTML） | ⚠️ 仅支持 SSG | SSR / API 功能将失效 |
10.2 使用 Vercel 部署（推荐）
🧭 步骤：
- 注册 Vercel（vercel.com）
- 关联你的 GitHub/GitLab 仓库
- 导入项目（自动识别 Next.js）
- 部署成功后自动分配
.vercel.app域名
✅ 优势：
- 支持 SSR / ISR / API Routes
- 支持 Edge Middleware
- 免费计划已能满足中小项目
- 自动 CI/CD 集成
10.3 构建命令与环境变量
📦 构建命令
npm run build # 编译构建
npm start # 启动生产服务（需要 build 后执行）
📁 输出目录
构建后会生成：
.next/
├── server/ # SSR 输出
├── static/ # 静态资源
└── ... # 其他构建产物
📄 配置环境变量
根目录新建 .env.production
DATABASE_URL=mysql://user:pass@host:port/dbname
JWT_SECRET=your-secret-key
代码中可通过 process.env.DATABASE_URL 获取。
10.4 使用 Docker 部署（可选）
📄 Dockerfile
# 基础镜像
FROM node:18-alpine
# 设置工作目录
WORKDIR /app
# 安装依赖
COPY package*.json ./
RUN npm install
# 拷贝代码
COPY . .
# 构建项目
RUN npm run build
# 启动应用
EXPOSE 3000
CMD ["npm", "start"]
📄 构建镜像并运行
docker build -t next-app .
docker run -p 3000:3000 next-app
10.5 静态导出部署（仅适用于 SSG）
npm run build
npm run export # 导出纯静态 HTML
输出到 /out 目录，可部署至：
- GitHub Pages
- VitePress / 静态文件服务器
- OSS/CDN 等
⚠️ 注意：
- 不支持 SSR、API Routes、中间件等功能
- 适合博客、文档等全静态内容
10.6 构建优化建议
| 优化项 | 方法 |
|---|---|
| ⏱️ 代码分割 | 默认支持按页面打包 |
| 📷 图片优化 | 使用 <Image /> + 自动 CDN 压缩 |
| 📦 资源体积分析 | 使用 next build && next analyze |
| 🌐 CDN 分发 | 图片、静态资源配置 CDN 域名 |
| ⏳ 首屏优化 | 延迟加载组件 / 骨架屏 |
| 🔍 使用 ISR | 实现静态页面定时更新（revalidate） |
| ✅ 自动预加载 | <Link /> 组件默认会预加载目标页面 |
10.7 使用分析工具
✅ 构建体积分析（webpack）
npm install @next/bundle-analyzer
📄 next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});
执行分析：
ANALYZE=true npm run build
✅ 小结
| 主题 | 内容 |
|---|---|
| 推荐平台 | Vercel（全功能支持） |
| 构建命令 | npm run build && npm start |
| 环境变量 | .env.production 文件 |
| Docker | 支持容器化部署 |
| 静态导出 | 仅适合 SSG 场景 |
| 性能优化 | 图片压缩 / 延迟加载 / 代码分割 |
| 分析工具 | @next/bundle-analyzer 查看打包体积 |
