前面我们学习了很多 Next.js 的功能和特性，本节来聊聊部署。把应用部署到生产环境是开发流程的最后一步，也是让用户能够访问你应用的关键步骤。
部署概述
Next.js 可以部署到多个平台：
- Vercel - 官方平台，零配置
- 自托管 - Node.js 服务器
- Docker - 容器化部署
- 静态导出 - 纯静态托管
- 其他平台 - Netlify、Railway、AWS 等
Vercel 是 Next.js 的官方平台，提供最佳的性能和体验。
准备部署
构建应用
在部署前，先在本地测试构建：
# 安装依赖
npm install
# 构建生产版本
npm run build
# 测试生产版本
npm start
环境变量
创建 .env.production：
# 数据库
DATABASE_URL=postgresql://...
# API 密钥
API_KEY=your_production_api_key
API_SECRET=your_production_secret
# 应用配置
NEXT_PUBLIC_APP_URL=https://yourdomain.com
检查清单
部署前检查：
- 所有环境变量都已配置
- 构建成功无错误
- 生产环境下测试正常
- 数据库迁移已完成
- 静态资源（图片、字体）已优化
部署到 Vercel
安装 Vercel CLI
npm install -g vercel
登录 Vercel
vercel login
部署项目
vercel
按照提示操作，Vercel 会自动：
- 检测项目类型（Next.js）
- 构建项目
- 部署到边缘网络
- 提供一个 HTTPS URL
配置环境变量
在 Vercel 控制台中配置环境变量：
- 进入项目设置
- 找到 Environment Variables
- 添加所有环境变量
- 重新部署项目
自定义域名
在 Vercel 控制台中添加自定义域名：
- 进入项目设置
- 找到 Domains
- 添加你的域名
- 按照提示配置 DNS
部署到其他平台
部署到 Netlify
创建 netlify.toml：
[build]
command = "npm run build"
publish = ".next"
[[plugins]]
package = "@netlify/plugin-nextjs"
部署到 Railway
Railway 支持 Docker 和直接部署，推荐使用 Docker：
# Dockerfile
FROM node:20-alpine AS base
# Install dependencies only when needed
FROM base AS deps
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm ci
# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
USER nextjs
EXPOSE 3000
ENV PORT 3000
CMD ["node", "server.js"]
部署到 Docker
构建 Docker 镜像：
docker build -t my-nextjs-app .
运行容器：
docker run -p 3000:3000 my-nextjs-app
自托管
如果你有自己的服务器，可以自托管 Next.js 应用。
使用 standalone 模式
在 next.config.js 中启用 standalone 模式：
module.exports = {
output: 'standalone',
}
构建后，会生成一个独立的服务器：
npm run build
启动服务器：
node .next/standalone/server.js
使用 PM2 管理进程
安装 PM2：
npm install -g pm2
启动应用：
pm2 start .next/standalone/server.js --name my-nextjs-app
静态导出
如果你的应用完全是静态的，可以导出为静态 HTML。
配置静态导出
在 next.config.js 中配置：
module.exports = {
output: 'export',
images: {
unoptimized: true,
},
}
构建静态站点
npm run build
构建完成后，out 目录包含所有静态文件，可以部署到任何静态托管服务。
部署到静态托管
部署到 Nginx、Apache、GitHub Pages、Netlify 等静态托管服务。
性能优化
启用压缩
在 next.config.js 中启用压缩：
module.exports = {
compress: true,
}
配置 CDN
Vercel 默认提供 CDN，其他平台需要手动配置。
监控性能
使用 Vercel Analytics 或其他监控工具：
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
)
}
CI/CD
GitHub Actions
创建 .github/workflows/deploy.yml：
name: Deploy to Vercel
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: amondnet/vercel-action@v25
with:
vercel-token: ${{ secrets.VERCEL_TOKEN }}
vercel-org-id: ${{ secrets.ORG_ID }}
vercel-project-id: ${{ secrets.PROJECT_ID }}
vercel-args: '--prod'
实用建议
这里分享几个在部署应用时特别有用的技巧。
使用环境变量
实际开发中,使用环境变量管理敏感信息是最基本也最重要的实践:
# 推荐这样做 - 使用环境变量
DATABASE_URL=postgresql://...
API_KEY=secret_key
# 避免这种情况 - 硬编码敏感信息非常危险
定期备份
这里有个小建议:定期备份数据库和重要文件,这个习惯能在关键时刻救你一命。
监控应用
这个技巧特别有用——使用日志和监控工具跟踪应用状态,能帮你快速发现和解决问题。
安全配置
最后分享几个安全方面的建议:
- 始终使用 HTTPS
- 正确配置 CORS
- 设置 CSP 头增强安全性
- 定期更新依赖包修复漏洞
总结
本节我们学习了 Next.js 应用的部署方法，包括 Vercel、自托管、Docker、静态导出等。选择合适的部署方式取决于你的需求和预算。Vercel 是最简单的选择，自托管提供更多控制权。
到这里，我们的 Next.js 教程就结束了。如果你对任何内容有疑问，欢迎在评论区提出来，我们一起学习讨论。祝你在 Next.js 的学习之路上越走越远！
