第五章：Next.js 渲染和部署

部署 Next.js 应用

1. 部署前的准备工作

在部署 Next.js 应用之前，需要完成以下准备工作：

  • 代码优化：确保代码已通过 ESLint 和 Prettier 检查，并移除不必要的依赖。
  • 环境变量配置：检查 .env 文件中的环境变量是否已正确设置（如 API 密钥、数据库连接等）。
  • 构建生产版本：运行 next build 生成优化后的生产代码。
  • 测试：在本地通过 next start 启动生产服务器，验证功能是否正常。

2. 支持的部署平台

Next.js 应用可以部署到多种平台，常见的选择包括：

  • Vercel（官方推荐）：原生支持 Next.js，提供一键部署、自动 CI/CD 和全球 CDN。
  • Netlify：支持静态站点和服务器端渲染，配置简单。
  • AWS（如 Amplify 或 EC2）：适合需要自定义基础设施的场景。
  • Docker 容器化：适合需要部署到 Kubernetes 或私有云的环境。

3. 部署到 Vercel（推荐）

步骤：

  1. 注册 Vercel 账号（如果尚未注册）。
  2. 安装 Vercel CLI：
    npm install -g vercel
  3. 登录并部署：
    vercel login
vercel --prod
  4. 配置项目：
    • 自动检测 Next.js 项目，无需额外配置。
    • 支持自定义域名、环境变量和部署分支（如 main 或 production）。

优势：

  • 自动处理 SSR、SSG 和 ISR。
  • 内置性能监控和日志。
  • 支持预览部署（每次 Pull Request 生成临时 URL）。

4. 部署到其他平台

Netlify 部署示例：

  1. 将代码推送到 GitHub/GitLab。
  2. 在 Netlify 控制台中选择仓库，配置构建命令：
    Build Command: next build && next export
Publish Directory: out
  3. 设置环境变量并触发部署。

Docker 部署示例：

  1. 创建 Dockerfile：
    FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]
  2. 构建并运行容器：
    docker build -t next-app .
docker run -p 3000:3000 next-app

5. 部署后的注意事项

  • 监控：集成 Sentry 或 LogRocket 跟踪运行时错误。
  • CDN 缓存：如果使用 SSG/ISR，配置 CDN 缓存策略（如 Vercel 的 revalidate）。
  • 回滚机制：保留旧版本以便快速回滚。
  • HTTPS：确保平台自动启用 HTTPS（如 Let's Encrypt）。

6. 常见问题与解决

  • 白屏问题：检查静态资源路径是否正确（如 basePath 配置）。
  • API 路由 404：确保服务器配置正确处理动态路由（如 Nginx 的 try_files）。
  • 环境变量缺失：在部署平台中显式设置 NEXT_PUBLIC_ 前缀的变量。

通过本节的学习，你应该能够将 Next.js 应用部署到生产环境，并根据需求选择适合的平台和配置。接下来可以尝试结合 CI/CD 工具（如 GitHub Actions）实现自动化部署流程。

Last Updated::