このエラーは Cloudflare Pages（Workers）側の設定不足 が原因です。
Next.js のコード自体の問題ではありません ❌

❗ エラーの意味

Node.JS Compatibility Error
no nodejs_compat compatibility flag set

👉 要するに：

「このサイトは Node.js 前提でビルドされているのに
Cloudflare が Node.js 互換モードで動いていない」

🔎 なぜ起きるのか

あなたのサイトは：

@cloudflare/next-on-pages でビルドされた Next.js

⬇
これは内部で Node.js API を使います（例）

• process

• Buffer

• crypto

• stream

• fs（擬似）

• path

• Node runtime polyfills

しかし…

Cloudflare Workers は本来：

👉 Node.js ではなく V8 isolate（ブラウザに近い環境）

💥 つまり

Node.js 機能を使うコード
⬇
Workers は理解できない
⬇
nodejs_compat フラグが必要

✅ 解決方法（これだけ）

Cloudflare Pages の設定で
Node.js 互換モードを ON にする

🛠 手順（2026年版）

1️⃣ Cloudflare ダッシュボードへ
https://dash.cloudflare.com

2️⃣ Pages → 該当プロジェクト

3️⃣ 左メニュー：

👉 Settings
👉 Functions
👉 Compatibility Flags

4️⃣ 追加：

nodejs_compat

5️⃣ 環境ごとに追加：

• Production

• Preview

👉 両方必要です

🚀 追加後

✔ Save
✔ 再デプロイ

🧠 なぜ next-on-pages で必須？

@cloudflare/next-on-pages は：

👉 Next.js を Workers で動かすための変換ツール

しかし完全な Edge 専用ではなく
Node API を使う部分があるため：

nodejs_compat = Node機能の疑似実装を有効化

❗ よくある勘違い

❌ 「Next.js は Edge だから不要」

➡ 違います

next-on-pages 版は Node polyfill 前提

❌ 「ローカルでは動く」

➡ Node.js 環境だから

❌ 「build 成功してるのに表示できない」

➡ Workers 実行時エラー

🔥 もし今から作るなら（重要）

Next.js を Cloudflare に最短公開するなら：

✔ App Router（推奨）

✔ Node compatibility ON

✔ next-on-pages 使用

🧩 さらに別の原因になるケース

もしフラグを入れても直らない場合：

• Compatibility Date が古い

• Workers Runtime が古い

• デプロイ未反映

• Functions 未有効

Next.js を Cloudflare Pages（Workers）で Vercel より高速にする設定は
実は “ON にするだけ” の項目がいくつかあります 🚀

結論から言うと：

🏆 Cloudflare が Vercel より速くなる条件

👉 完全エッジ配信 + キャッシュ最適化

⚡ 最強設定（2026年版）

✅ ① nodejs_compat を ON（必須）

Functions → Compatibility Flags

nodejs_compat

👉 これが無いと遅い・エラー・フォールバックが発生

✅ ② Compatibility Date を最新に

Settings → Functions → Compatibility Date

👉 今日の日付に近いものにする

2026-03-xx

新しいほど：

• V8 が新しい

• API 最適化

• Edge 実行が速い

✅ ③ Edge Runtime を優先する

Next.js 側：

export const runtime = "edge"

特に：

• API routes

• Middleware

• 認証

• 軽い SSR

👉 Node runtime を避ける

✅ ④ 静的化できるページは全部 SSG

これが最重要 🔥

export const dynamic = "force-static"

または：

export const revalidate = false

👉 Cloudflare CDN に完全キャッシュされる
👉 世界最速レベルになる

🧠 なぜ速くなる？

SSG → HTML を直接 CDN から返す

SSR → Workers が毎回実行

✅ ⑤ ISR を使う（最強バランス）

export const revalidate = 60

👉 60秒ごとにバックグラウンド再生成

Cloudflare は ISR が非常に速い

✅ ⑥ キャッシュヘッダー最適化（超重要）

Next.js Route Handler：

return new Response(data, {
  headers: {
    "Cache-Control": "public, s-maxage=86400, stale-while-revalidate=604800",
  },
})

意味：

• CDN に1日保存

• 1週間は古いデータでも即返す

• 裏で更新

👉 Vercel より速くなる最大要因

✅ ⑦ Middleware を最小化

重い Middleware は：

❌ 毎リクエスト実行
❌ エッジ速度低下

✅ ⑧ 画像最適化を Cloudflare に任せる

Next.js config：

images: {
  unoptimized: true,
}

👉 Cloudflare Images / Polish が最速

✅ ⑨ HTTP/3 + Brotli 圧縮（自動）

Cloudflare はデフォルト ON 👍

🔥 最速構成（これが最強）

🎯 Next.js 設定

✔ App Router
✔ SSG + ISR 中心
✔ Edge Runtime
✔ Middleware 最小

🎯 Cloudflare 設定

✔ nodejs_compat ON
✔ 最新 Compatibility Date
✔ キャッシュヘッダー設定

🏎 実測での差（典型）

💎 さらに速くする裏技（上級）

🔥 KV / R2 を使う

• DB 直接アクセスを避ける

• エッジ近くにデータ配置

🔥 Full Edge SaaS 構成

Browser
   ↓
Cloudflare CDN
   ↓
Workers (Edge)
   ↓
KV / R2 / D1

👉 世界最速クラス

必要なら👇

✅ Next.js × Cloudflare 最速テンプレ（コピペ可）
✅ 1人で作れる高速AI SaaS構成
✅ Vercel → Cloudflare 移行チェックリスト
✅ 無料枠で月100万PV耐える構成

も出せます 🚀