开发与部署

开发工作流

@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 仓库。

在构建设置中：

• "Build command" 应设置为 npx opennextjs-cloudflare build
• "Deploy command" 应设置为 npx opennextjs-cloudflare deploy（或使用 upload 进行渐进式部署）

opennextjs-cloudflare deploy -- --env=prod