nextjs cloudflare 踩坑日记

2026/1/7: 自行查看官网是否有更新变化【根据官网复制即可，下面也是复制的】

注意事项

window 下无法运行，会有路径问题，可以使用子系统ubuntu

mac 正常安装即可

nextjs 16+版本搭配wrangler.jsonc会炸，无法运行pnpm run preview

"next": "16.1.1", "wrangler": "^4.54.0" "@opennextjs/cloudflare": "^1.14.8", 搭配报错版本测试

nextjs 16.0.8 版本 + wrangler.toml 能正常运行

nextjs 16.0.8 版本 + wrangler.jsonc 不能正常运行
nextjs 16.1.1 版本 + wrangler.toml 不能正常运行
nextjs 16以下都可以正常运行
nextjs 16.1.1 版本 + wrangler.jsonc 不能正常运行

pnpm add @opennextjs/cloudflare@latest
pnpm add -D wrangler@latest

添加配置文件 wrangler.jsonc || wrangler.toml 二选一

wrangler.jsonc

jsonc 复制代码

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "main": ".open-next/worker.js",
  "name": "my-app", # 自行更改
  "compatibility_date": "2026-01-07",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  }
}

wrangler.toml

toml 复制代码

  main = ".open-next/worker.js"
  name = "my-app" # 自行更改
  compatibility_date = "2026-01-07"
  compatibility_flags = ["nodejs_compat"]
  [assets]
  directory = ".open-next/assets"
  binding = "ASSETS"

创建文件 open-next.config.ts

ts 复制代码

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

export default defineCloudflareConfig();

package.json下的scripts添加命令

复制代码

"preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
"deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
"cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"

使用 Cloudflare 适配器测试您的网站
pnpm run preview

上面命令无报错，即可发布部署
pnpm run deploy