用途
本技能面向将 Next.js 应用部署到 Cloudflare Workers 的场景,使用 OpenNext 适配器(@opennextjs/cloudflare)完成。适配器接收标准的 Next.js 构建产物,执行 package.json 中的 build 脚本,然后将输出转换为可在 Workers 运行时上运行的形式,使用的是 Node.js 兼容层(nodejs_compat),而不是 Edge 运行时。
主要能力
覆盖 App Router、Pages Router、Route Handlers、动态路由、React Server Components、Server Actions、SSG、SSR、ISR、Middleware 等。支持通过 Cloudflare Images 进行图片优化(binding 或自定义 loader)、Partial Prerendering(PPR)以及 Composable Caching('use cache')。
关键要求包括:运行时使用 Node.js(默认),需移除所有 export const runtime = "edge";compatibility_flags 需包含 ["nodejs_compat", "global_fetch_strictly_public"];compatibility_date 建议 ≥ 2025-05-05;Wrangler ≥ 3.99.0 才能部署,≥ 4.13.0 支持 keep_names,≥ 4.36.0 支持稳定的 remote bindings。Next.js v16 全部次版本/补丁版本受支持,v14、v15 的最新次版本受支持,v14 将于 2026 年第一季度停止支持。Worker 大小限制为压缩后 3 MiB(Free)/ 10 MiB(Paid)。Windows 不保证完全可用,建议使用 WSL、Linux 虚拟机或 Linux/macOS CI。
本技能与 nextjs 技能的分工:nextjs 技能关注框架/App Router/Server Components/Cache Components 模式,适用于任意平台;本技能关注通过 OpenNext 适配器部署到 Workers,包括 wrangler.jsonc、open-next.config.ts、getCloudflareContext、缓存分层、绑定、skew protection、多 Worker 及 Workers 特有的错误。
注意 proxy.ts 的例外:Next 16 将 middleware.ts 更名为 proxy.ts,但 @opennextjs/cloudflare 尚不识别 proxy.ts(issue #1277),在 Cloudflare 上仍需继续使用 middleware.ts。这是 nextjs 技能的指导在本技能中不适用的一处。
使用方式
新项目推荐使用:npm create cloudflare@latest -- my-next-app --framework=next --platform=workers。C3 会脚手架生成 Next.js 应用、安装 @opennextjs/cloudflare、创建 wrangler.jsonc + open-next.config.ts + .dev.vars、配置 package.json 脚本,并在启用 R2 时创建用于缓存的 R2 存储桶。
已有 Next.js 项目可用一条命令迁移:npx @opennextjs/cloudflare migrate。该命令会自动安装适配器与 wrangler、创建配置文件、更新脚本、添加 public/_headers、把 .open-next 加入 .gitignore、在 next.config.ts 中接入 initOpenNextCloudflareForDev(),并在账户启用 R2 时创建并配置 R2 缓存桶。也可手动安装:npm install @opennextjs/cloudflare@latest 与 npm install --save-dev wrangler@latest。
package.json 中常用四个脚本:dev(next dev,快速 HMR)、preview(构建并在 workerd 本地运行,部署前务必执行以捕获运行时问题)、deploy(填充远程缓存后 wrangler deploy,立即提供服务)、upload(填充远程缓存后 wrangler versions upload,不自动提供服务,用于渐进式发布)。此外还有 cf-typegen(wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts)。build、preview、deploy、upload 都会隐式调用 populateCache。
在 next.config.ts 中加入 initOpenNextCloudflareForDev(),以便本地使用 getCloudflareContext()。访问 Cloudflare 绑定时不要使用 process.env,应使用 getCloudflareContext() 官方 API。静态路由(ISR/SSG)必须使用 async 模式:const { env } = await getCloudflareContext({ async: true });。绑定变更后需重新运行 npm run cf-typegen。
缓存
缓存包含三部分:Incremental Cache(存储)、Queue(去重/重新验证)、Tag Cache(按需 revalidateTag/revalidatePath)。按站点规模有三种配置:仅 SSG(无重新验证)使用 staticAssetsIncrementalCache + enableCacheInterception: true,无 Queue 和 Tag Cache;小型站点(ISR/按需)使用 r2IncrementalCache + doQueue + d1NextTagCache;大型/高流量站点使用 withRegionalCache(r2IncrementalCache, { mode: "long-lived" }) + doQueue + doShardedTagCache({ baseShardSize: 12 }) + purgeCache({ type: "direct" })。保留绑定名不可复用:ASSETS、WORKER_SELF_REFERENCE、NEXT_INC_CACHE_R2_BUCKET、NEXT_CACHE_DO_QUEUE、NEXT_TAG_CACHE_D1、NEXT_TAG_CACHE_DO_SHARDED、NEXT_CACHE_DO_PURGE、IMAGES。应避免用 Workers KV 做增量缓存,因为其最终一致性可能长期保留陈旧数据。缓存拦截与 PPR 目前不兼容。按需重新验证需要同时具备 Tag Cache 与 Cache Purge 组件。Pages Router 的 res.revalidate 需要名为 WORKER_SELF_REFERENCE 的自引用 service binding。静态资源不由 Worker 前置,因此 next.config.ts 的 headers() 对 public/ 与不可变构建文件不生效,应使用 public/_headers。
适用场景与限制
适用于将 Next.js 应用部署到 Cloudflare Workers 并使用其绑定(D1/R2/KV/AI/Hyperdrive 等)、缓存、多 Worker、skew protection 等能力。不支持的项包括:Edge Runtime(仅 Node 运行时,需移除 runtime = "edge")、Node Middleware(Next 15.2+,issue #617)。Turbopack 受支持但存在已知问题(#1305、#1317、#1326),webpack 更稳妥。多 Worker 模式与 preview URLs、skew protection、@opennextjs/cloudflare deploy 不兼容。skew protection 对有 Durable Object 的 Worker 会被禁用,需将 DO 移至单独 Worker。常见错误包括 Worker 大小超限、跨请求使用全局 DB 客户端导致的 I/O 错误、NPM 包导入解析失败、SSRF(CVE-2025-6087,< 1.3.0 版本,需升级至 ^1.3.0)、FinalizationRegistry 未定义(compatibility_date 过旧)、__name 未定义(需设置 keep_names: false)等。已知未修复 bug 需查阅 issue 跟踪器,包括 #1171、#1277、#1130/#1225、#1321、#1322/#1214、#1315、#1305、#1317、#1326、#617。
版本信息:@opennextjs/cloudflare ^1.18.1 · Next.js 14/15/16 · Wrangler ≥ 3.99.0 · compatibility_date ≥ 2025-05-05。