Cloudflare 中文文档
Pages
编辑这个页面
跳转官方原文档
Set theme to dark (⇧+D)

部署静态 Next.js 站点

Next.js是一个用于创建网站和应用程序的开源 React 框架。在本指南中,你将创建一个新的 Next.js 应用程序,并使用 Cloudflare Pages 进行部署。

本指南将指导你如何使用 static exports 部署静态站点 Next.js 项目。

​​ 在你继续之前

所有框架指南都假定你已经对 Git 有了基本了解。如果你是 Git 的新手,请参考这本 Git 手册摘要,了解如何在本地机器上设置 Git。

如果使用 SSH 克隆,则必须在每台用于从 GitHub 推送或拉取的计算机上 生成 SSH 密钥

更多信息请参阅 GitHub 文档 Git 文档

​​ 选择你的 Next.js 项目

如果已经有了要部署的 Next.js 项目,请确保该项目已 配置为静态导出,并更改为其目录,然后继续下一步。否则,请使用 create-next-app 创建一个新的 Next.js 项目。

创建项目后,将以官方 with-static-export示例为模板生成一个新的 my-app 目录。请切换到该目录继续。

​​ 创建 GitHub 仓库

访问 repo.new 创建一个新的 GitHub 仓库。创建新仓库后,在终端运行以下命令,准备并向 GitHub 推送本地应用程序:

​​ 将应用程序部署到 Cloudflare 页面

将网站部署到页面:

  1. 登录 Cloudflare 仪表板 并选择你的账户。
  2. 在账户主页,选择 工作者和页面> 创建应用程序> 页面> 连接到 Git
  3. 选择你创建的新 GitHub 仓库,然后在设置构建和部署部分,选择 Next.js (Static HTML Export) 作为你的框架预设。你的选择将提供以下信息。
Configuration option Value
Production branch main
Build command npx next build
Build directory out

配置好网站后,你就可以开始第一次部署了。Cloudflare Pages 将安装 next、项目依赖项,并在部署前构建网站。

​​ 预览你的网站

部署网站后,你将在 *.pages.dev上为你的项目收到一个唯一的子域。

每次你向 Next.js 网站提交新代码时,Cloudflare Pages 都会自动重建你的项目并进行部署。你还可以访问新拉取请求上的 预览部署,这样你就可以在将更改部署到生产环境之前预览网站的外观。

有关将你的第一个网站部署到 Cloudflare Pages 的完整指南,请参阅 入门指南