跳转到内容
搜索文档

静态网站

最后更新 查看 MarkdownAgent 设置

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 项目。

npx create-next-app --example with-static-export my-app

创建项目后,将使用官方 with-static-export ↗ 示例作为模板生成新的 my-app 目录。切换到此目录继续。

cd my-app

创建 GitHub 仓库

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

git remote add origin https://github.com/<GH_USERNAME>/<REPOSITORY_NAME>.git
git branch -M main
git push -u origin main

将应用程序部署到 Cloudflare Pages

要将站点部署到 Pages:

  1. 在 Cloudflare 仪表板中,前往 Workers & Pages 页面。

    Go to Workers & Pages ↗
  2. 选择 Create application(创建应用程序)。

  3. 选择 Pages 选项卡。

  4. 选择 Import an existing Git repository(导入现有 Git 仓库)。

  5. 选择你创建的新 GitHub 仓库,然后选择 Begin setup(开始设置)。

  6. 在 Build settings(构建设置) 部分,选择 Next.js (Static HTML Export) 作为 Framework preset(框架预设)。你的选择将提供以下信息:

Configuration optionValue
Production branchmain
Build commandnpx next build
Build directoryout

配置站点后,即可开始首次部署。Cloudflare Pages 将安装 next、项目依赖并构建站点,然后完成部署。

预览您的网站

部署站点后,你将在 *.pages.dev 上获得项目的唯一子域名。

每次向 Next.js 网站提交新代码时,Cloudflare Pages 都会自动重新构建并部署您的项目。你还可以在新 pull request 上获得预览部署,在部署到生产环境之前预览更改效果。

有关将第一个站点部署到 Cloudflare Pages 的完整指南,请参阅快速入门指南。

这篇文档对您有帮助吗?