introduction

现在让我们学习如何部署next.js 应用到生产环境,包括如何部署管理 / 自托管(使用next.js 构建API)

Next.js Build API

next build生成了一个应用在生产环境下的最理想版本 … 标准输出包括

• 使用getStaticProps的页面或者自动静态优化的Html文件
• 全局样式的CSS 文件 以及独立的单独区域的样式
• 来自next.js 服务器的进行预渲染动态内容的js
• 通过React在客户端进行交互的js

输出生成在.next文件夹下

• .next/static/chunks/pages在这个目录下的js 文件 具有和路由相同的名称 ..
• .next/static/chuncks/pages/about.js当查看应用中的/about路由时所加载的js文件 ….
• .next/static/media从next/images中静态导入的图片是进行hash 并拷贝到这里 …
• .next/static/css应用中所有页面应用的全局样式文件
• .next/server/pages从服务器进行预渲染的HTML / js入口… .nft.json在 Output File Tracing 启动时候会创建并且会包含给定页面依赖的所有文件路径 ….
• .next/server/chunks在整个应用在多个地方使用的共享js chunks ;
• .next/cache构建缓存和缓存图片，响应以及来自next.js 服务器的页面的缓存… 使用一个缓存能够减少构建时间并且能够提高加载图片的性能 …

所有在.next内的js代码已经被编译并且浏览器打包文件已经最小化能够帮助实现最好的性能并且支持所有现代浏览器 …

Vercel 进行Next.js 管理

Vercel 是一个快速部署Next.js 应用且零配置的方式 …

当部署到Vercel上的时候,平台会自动的检测Next.js automatically detects Next.js 运行 next build并自动的优化构建输出,包括

• 如果未改变,在部署之间持久化缓存的资源
• 每次提交使用唯一的URL 进行Immutable deployments ..
• 页面自动的被静态优化,如果可能
• 资源(js,css,图像,字体)将被压缩并保存在全局的 Edge Network 中 ..
• 一个API 路由将自动的被优化为隔离的 Serverless Functions,能够被无限的缩放 ..
• 中间件将自动的优化为 Edge Functions 且无任何冷启动并即时引导 …

• 自动的使用Next.js Analytics 进行性能监听 …
• 自动的Https 以及 SSL 证书
• 自动的CI /CD（通过github / gitlab ,bitbucket,等等) …
• 支持环境变量
• 支持自定义域名Custom Domains
• 支持使用next/image进行图片优化 ..
• 通过git push实时全局部署

自托管

你能够自托管Next.js (且具有所有特性),使用Node.js 或者 Docker …

你能够进行静态HTML 导出,但是有一些限制 … 在高级特性部分进行查看 ..

Node.js 服务器

只要安装了 Node.js 即可进行部署 …

首先package.json 必须包含build / start脚本 ..

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

然后运行next build去构建应用,最终通过next start启动Node.js 服务器,这个服务器支持next.js 的所有特性 …

如果你使用next/image,考虑增加一个sharp进行更多的性能提升

Image Optimization

通过运行npm install sharp安装依赖,在生产环境进行性能提升 ..在Linux平台,sharp也许需要额外的配置去支持额外的内存消耗 …

Docker 镜像

https://github.com/vercel/next.js/tree/canary/examples/with-docker 示例 …

Next.js 能够被部署到任何托管提供器中(只要支持docker 容器),你能够使用这种方式(当部署一个容器编排时,例如通过k8s或者 HashiCorp Nomad ),或者运行在任何云提供器的单个节点中 …

1. 安装docker
2. 构建项目 docker 镜像
3. 运行docker 容器

如果你需要在多个环境中使用不同的环境变量,检查 with-docker-multi-env 学习更多 ..

静态HTML 导出

如果你想尝试静态HTML 导出你的Next.js 应用,查看文档了解更多 …Static HTML Export documentation.

其他服务

以下服务需要Next.js12 +,你能够查看示例或者了解指南如何部署Next.js到每一种服务 ..

管理的服务器

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

仅静态

以下服务支持部署Next.js - 通过 next export

• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• GitHub Pages

你能够手动的部署next export输出到任何静态托管provider,经常通过 你的 CI /CD 管道例如Github action / Jenkins , AWS CodeBuild , Circle CI , Azure Pipelines 以及更多 ..

Serverless

• AWS Serverless
• Terraform
• Netlify

不是所有的服务器提供器实现Next.js Build API (next start,它可能有所不同),需要查看不同的提供器支持那些特性 …

自动更新

当你部署你的Next.js 应用的时候,你想要查看最新版本,但是不需要重载 ..

Next.js 将自动的加载应用的最新版本(在后台,当路由的时候),对于客户端导航,next/link将作为一个普通<a>标签的能力 ..

注意: 如果一个新的页面(使用的旧版本)已经被next/link预抓取,Next.js 将显式旧版本,导航到一个没有预抓取的页面(例如没有被CDN 级别进行缓存)将会加载最新版本 ..

手动优雅的关闭

有些时候你可能想要运行某些清楚代码,在进程接收到信号SIGTERM或者SIGINT的时候:

你能够设置环境变量NEXT_MANUAL_SIG_HANDLE= true然后注册一个处理器到_document.js文件中用于处理这些写好…

// pages/_document.js
if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // this should be added in your custom _document
  process.on('SIGTERM', () => {
    console.log('Received SIGTERM: ', 'cleaning up')
    process.exit(0)
  })
  process.on('SIGINT', () => {
    console.log('Received SIGINT: ', 'cleaning up')
    process.exit(0)
  })
}