Next.js - 部署

Next.js - 部署

当你的 Next.js 应用准备好后，你需要构建它用于生产环境，并将其部署到托管服务商。此过程包括创建一个优化后的构建，然后将其运行在服务器或平台上。

步骤 1：构建用于生产环境

next build 命令会编译你的应用，打包 JavaScript，优化资源（图片、字体），预渲染静态页面，并准备服务器端代码（路由处理器 Route Handlers、服务器组件 Server Components）。

npm run build

此命令会分析你的代码（服务器组件、客户端组件、数据获取方法、generateStaticParams），以创建最有效的输出。结果存储在 .next 目录中。

在构建过程中，你会看到详细的输出，说明页面、它们的大小以及它们的渲染方式（静态、服务器渲染等）。这对于性能分析很有用。

步骤 2：运行生产服务器（自托管）

如果你在自己的服务器上自托管（例如 VPS、Node.js 环境），可以在构建后使用 next start 启动生产服务器。

# 确保你已先运行过 'npm run build'
npm run start

此命令会启动一个 Node.js 服务器，该服务器已针对服务你在上一步中构建的 Next.js 应用进行了优化。它处理路由、提供静态资源、服务器端渲染和 API 路由。

# 示例输出：
> my-app@0.1.0 start
> next start

  ▲ Next.js 14.x.x
  - 本地：        http://localhost:3000

 ✓ 准备就绪，耗时 x.xms

你通常会使用像 pm2 这样的进程管理器运行此命令，以确保服务器在后台可靠运行。

步骤 3：部署到平台（推荐）

虽然自托管是可行的，但部署到针对 Next.js 优化的平台通常更简单高效。Next.js 背后的公司 Vercel 提供了无缝的部署体验。

使用 Vercel 部署

Vercel 为 Next.js 项目提供零配置部署。

1. 将你的 Next.js 项目代码推送到 Git 仓库（GitHub、GitLab、Bitbucket）。
2. 注册 Vercel 账户（提供免费层级）并连接你的 Git 提供商。
3. 将你的 Git 仓库导入到 Vercel。
4. Vercel 会自动检测到这是一个 Next.js 项目，运行 next build，并将其全球部署到其边缘网络（Edge Network）。

使用 Vercel 的好处包括：

• 在 Git 推送时自动构建和部署。
• 为静态资源和边缘函数（Edge Functions）提供全球 CDN。
• 针对 Next.js 特性（服务器组件 Server Components、无服务器函数 Serverless Functions、ISR、图片优化 Image Optimization）优化的基础设施。
• 为每个分支/拉取请求（PR）提供预览部署。
• 轻松配置自定义域名和自动 HTTPS。

其他部署选项

Next.js 应用也可以部署到其他平台：

• **Node.js 托管：** 任何支持 Node.js 的平台（AWS EC2、Google Cloud Run、Azure App Service、DigitalOcean App Platform、Heroku），通过运行 npm run build 和 npm run start 来实现。
• **容器：** 为你的应用构建 Docker 镜像，并将其部署到 Kubernetes 等容器编排平台或 AWS Fargate 等服务。
• **无服务器平台：** Netlify、AWS Amplify 或 Cloudflare Pages 等提供商也支持部署 Next.js 应用，通常需要特定的适配器或配置。
• **静态导出：** 对于纯静态站点（构建后没有服务器端渲染或 API 路由），你可以使用 next export（需要在 next.config.js 中配置）。这会生成可部署到任何静态托管服务的纯 HTML/CSS/JS 文件。对于全栈 Next.js 应用来说，这种情况不太常见。

选择合适的部署策略取决于你的应用需求、可扩展性要求和运维偏好。对于大多数用户而言，Vercel 提供了最简单、最优化的路径。