跳转到内容
搜索文档

静态网站

最后更新 查看 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 的完整指南,请参阅快速入门指南

这篇文档对您有帮助吗?