我为何使用 OpenNext 将大部分 Next.js 项目部署到 Cloudflare

在过去的一年里，我将多个 Next.js 项目部署到了 Cloudflare 上，其中包括 Learn English Sounds（一个包含 900 多篇四种语言博客文章的发音平台，每月处理约 1 万次会话）、这个作品集网站以及其他一些项目。

我尝试过 Vercel、AWS、Google Cloud 和自托管。但我一直在回归 Next.js + OpenNext + Cloudflare 的组合。并非总是如此。我的口音训练应用，位于 accent.learnenglishsounds.com，运行在带有 Cloud Run 后端的 Firebase Hosting 上，因为那样更合理。但对于内容丰富的网站，Cloudflare 现在是我的默认选择。

有趣的一点是：我最近注意到像 techforce.gov、safedc.gov 和 americabydesign.gov 这样的联邦政府网站运行的正是这个技术栈。通过 OpenNext 在 Cloudflare 上运行 Next.js。如果联邦机构都信任它来处理重要事务，那它显然已经做好了生产准备。

什么是 OpenNext？

问题在于：Next.js 是由 Vercel 构建的，而最好的功能（ISR、中间件、图像优化）都内置在 Vercel 的基础设施中。部署到其他地方就会丢失这些功能。

OpenNext 解决了这个问题。@opennextjs/cloudflare 包将你的 Next.js 构建转换为 Cloudflare Workers 可以原生运行的内容：App Router、服务器组件、API 路由，所有这些。

为什么选择 Cloudflare 而不是 Vercel？

Vercel 很棒。开发者体验（DX）确实是一流的。但以下是我迁移的原因：

1. 规模化后的成本

Vercel 的免费套餐对个人项目来说很慷慨，但随着流量的增加，成本会迅速攀升。我曾有一个月收到了 130 美元的账单。公平地说，在我联系后 Vercel 退还了其中一部分。但对于简单的内容网站来说，这种意外的开销是不可持续的。Learn English Sounds 为四种语言的数千名日常访问者提供服务，仅带宽就会使账单持续上涨。

Cloudflare 为我提供了：

• 无限带宽（所有套餐）
• 每月 500 次构建免费，付费套餐无限次
• 分发到 300 多个边缘节点的 CDN

我为 Workers 付费套餐支付 5 美元/月。这足以覆盖多个生产网站。

2. 全球性能

Cloudflare 的边缘网络非常庞大。静态资源在全球边缘节点缓存。使用 s-maxage=31536000，回头客的加载速度几乎是即时的。

3. 集成生态系统

Cloudflare 不仅仅是托管。我使用了：

• Cloudflare Images：自动图像优化和调整大小
• Turnstile：无需烦人的 CAPTCHA 即可进行机器人防护
• D1：用于简单数据库需求的无服务器 SQLite
• KV：用于缓存和配置的键值存储
• Workers：在我需要自定义逻辑时的边缘函数

一个仪表板，一张账单。

设置

这是一个典型的部署流程：

1. 安装依赖项

npm install @opennextjs/cloudflare

2. 配置 OpenNext

创建 open-next.config.ts：

import { defineCloudflareConfig } from "@opennextjs/cloudflare";

export default defineCloudflareConfig({});

3. 添加 wrangler.toml

name = "my-nextjs-site"
main = ".open-next/worker.js"
compatibility_date = "2025-09-11"
compatibility_flags = ["nodejs_compat"]

[assets]
  directory = ".open-next/assets"
  binding = "ASSETS"

4. 构建和部署

npx opennextjs-cloudflare build
npx wrangler deploy

完成。你的应用正在 Cloudflare Workers 上运行。

哪些功能运行良好

• App Router：完整的 RSC 支持、布局、加载状态
• API 路由：pages/api 和 app/api 均可工作
• 中间件：在边缘运行，具有完整的 Request/Response API 访问权限
• 静态生成：generateStaticParams 按预期工作
• 图像优化：通过 Cloudflare Images 工作

几个需要注意的地方

需要注意的几点：

• ISR 限制：增量静态再生（ISR）的工作方式不同。我转而使用 stale-while-revalidate 模式。
• Node.js API：某些 Node API 在 Workers 中不可用。尽可能坚持使用 Web API。
• 构建时间：大型网站需要更长时间，因为所有内容都会编译成边缘兼容的代码。
• 调试：错误信息可能很晦涩。在本地使用 wrangler dev 尽早捕获问题。

何时使用此技术栈

最适用于：

• 内容丰富的网站（博客、文档、营销页面）
• 多语言应用
• 成本可预测性很重要的项目
• 已使用 Cloudflare 进行 DNS 或安全设置的团队

入门

如果你想尝试一下：

1. 查看 OpenNext Cloudflare 文档
2. 从一个简单的项目开始，以了解构建过程
3. 使用 wrangler dev 进行本地开发
4. 为拉取请求设置预览部署

如果你已经了解 Next.js，学习曲线很小。你的大部分代码保持不变。