开发与部署

开发工作流

@opennextjs/cloudflare 的主要目的是获取使用标准 Next.js 工具构建的 Next.js 应用程序，并将其转换为与 Cloudflare Workers 兼容的格式。

此代码转换过程需要一些时间，使得该适配器不太适合活跃的应用程序开发，因为在活跃开发中，非常快的反馈循环和其他生活质量功能（如热模块替换 (HMR)）至关重要。幸运的是，Vercel 已经为此工作流提供了出色的工具，Next.js 开发人员可能已经熟悉这些工具。

我们建议开发人员继续使用他们已经熟悉的工具进行本地开发，然后在准备将应用程序部署到 Cloudflare 平台时使用 @opennextjs/cloudflare。

让我们更详细地探讨我们推荐的应用程序开发工作流，以获得最佳的开发人员体验。

基于模板创建新应用程序

要创建一个新的 Next.js 应用程序，预配置为使用 @opennextjs/cloudflare 在 Cloudflare 上运行，请运行：

npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

使用 next dev 进行本地开发

我们认为最好的开发工作流是使用 Next.js 提供的 next dev 命令。

要在运行 next dev 时使用 getCloudflareContext API 访问 Cloudflare 资源，您需要更新 Next.js 配置以调用 initOpenNextCloudflareForDev，如下例所示：

// next.config.ts
import type { NextConfig } from "next";
 
const nextConfig: NextConfig = {
  /* 此处配置选项 */
};
 
export default nextConfig;
 
import { initOpenNextCloudflareForDev } from "@opennextjs/cloudflare";
initOpenNextCloudflareForDev();

使用 opennextjs-cloudflare 在 Workers 运行时上构建和测试

在使用 next dev 完成 Next.js 应用程序的迭代后，您可以通过运行 opennextjs-cloudflare build 命令 将其转换为 Cloudflare Worker。这将在 .open-next 目录中生成 Worker 代码。

然后，您可以在 Cloudflare Workers 运行时中本地预览应用程序。

要在本地预览您的 worker，请运行 opennextjs-cloudflare preview 命令。这将填充缓存并创建一个本地服务器，在 Cloudflare Workers 运行时中运行您的 worker。测试您的 worker 很重要，以确保它已正确构建并按预期工作。

将您的应用程序部署到 Cloudflare Workers

opennextjs-cloudflare 的 deploy 和 upload 命令都可用于将您的应用程序部署到 Cloudflare Workers。这两个命令都将初始化远程缓存并将您的应用程序上传到 Cloudflare 基础设施。

虽然 deploy 会在上传后立即开始提供您的应用程序服务，但 upload 仅创建应用程序的新版本，以便您可以使用 渐进式部署 (opens in a new tab)。

本地构建

使用 build 命令，后跟 deploy 或 upload 来部署您的本地构建。

Workers 构建

使用 Workers 构建时，请确保按照 本指南 (opens in a new tab) 中的说明设置环境变量。

然后，您可以按照 文档 (opens in a new tab) 连接您的 GitHub 仓库。

在构建设置中：

• “构建命令”应设置为 npx @opennextjs/cloudflare build。
• “部署命令”应设置为 npx @opennextjs/cloudflare deploy（或使用 upload 进行渐进式部署）。