Next.jsをCloudflare上で動かす

アーキテクチャ

BFF（Next.js）+API（Hono）の構成をCloudflareで動かすための方法をまとめる。

Tip: Cloudflareの`assets`とは？

まず、大前提として、Cloudflare Workerは

サーバーでない
Cloudflare のグローバルエッジ（CDN）の中で動く「リクエスト処理関数」である。

text

Client Request
   ↓
Cloudflare Edge
   ├─ Cache
   ├─ Static Assets
   └─ Worker (JS)

言い換えると、Worker は「CDNの処理パイプラインに差し込まれた JavaScript」

Cloudflareはリクエスト受信時に次のような順序で処理を実行する。

リクエストが、静的アセットへのアクセスであれば静的アセットを返す
キャッシュで返せるのであれば、キャッシュで返す
いずれにも合致しない場合は、Worker（JS実行）で処理する

TIP

Workerが静的アセットを直接配信しているわけではなく、静的アセットはCDNから配信している

リクエストごとに内容を変える必要のないモノ（js、css、画像、フォントなど）は、cloudflare側に明示的に「静的アセット」として、wrangler.jsoncに登録することで最速・最安でリクエストに答えてくれる。

さて、ここで実際にapp/web/wrangler.jsoncを見てみる。

jsonc

{
  "name": "cf-nextjs-poc-web-noimasaki",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-01-18",
  "compatibility_flags": ["nodejs_compat"],

  // OpenNext が出力する静的アセットを配信する
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },

  // ★ここが「Web worker が API に辿り着く」ための指定（Service Binding）
  "services": [
    {
      "binding": "API",
      "service": "cf-nextjs-poc-api-noimasaki"
    }
  ]
}

OpenNextはビルド実行時に.open-next/assetsに静的アセットをまとめてくれる
"assets"には.open-next/assetsを"ASSETS"としてバインディングしてあげることで、wranglerはビルド時に静的アセットをCDNにデプロイしてくれる
リクエスト対象が静的アセットに登録されたものはworkerから返されず、CDNから返される。

Cloudflare Workers とは？

一言で表すと、 Cloudflare 上で動く「サーバレスな JavaScript 実行環境」　→lambdaとかFargateみたいな

Workers が得意なこと

API
認証
BFF（Backend For Frontend）
画像・認可付き配信

Hono とは？

一言で表すと、 Workes向けに最適化された超軽量Webフレームワーク

なぜExpressじゃない？

ExpressはNode.js専用
WorkersはNodeではない（Web標準API）

Honoは：

Workers / Deno / Bun 対応
Web標準（Request / Response）ベース
ルーティング・ミドルウェアがわかりやすい

実装例：

const app = new Hono();
app.get("/health", c => c.json({ ok: true }));

Wrangler とは？

一言で表すと、 Cloudflare Worker / Pages を操作する公式CLI 　→aws cliみたいな

Wranglerがやること：

ローカル開発サーバ起動
Cloudflareへのデプロイ
D1 / KV / R2の作成・バインド
環境変数管理

wrangler devコマンドの正体：

Workersをローカルで擬似的に実行
実際のWorkers環境にかなり近い挙動

pnpmとは

TIP

pnpm add -Dw

pnpm add <pkg>：パッケージ追加
pnpm add -D <pkg>：開発用パッケージ追加
pnpm add -w <pkg>：workspace root にパッケージ追加
pnpm --filter <pkg> add：特定パッケージだけに追加

TIP

-Cと--filterの違い

pnpm -C apps/web add xxx: そのデイレク取りに移動した体でpnpmを実行　※今回は特にmonorepoの場合は使わない
pnpm add xxx --filter ./apps/web: ./apps/webパッケージにのみ依存を追加【こっちを使う】

Next.jsをCloudflare上で動かす ​

Tip: Cloudflareのassetsとは？ ​

Cloudflare Workers とは？ ​

Hono とは？ ​