Next.js を Cloudflare Workers で動かす

構成の概要

@opennextjs/cloudflare アダプタを使うと、Next.js の App Router アプリを Cloudflare Workers 上で動かせます。Pages + next-on-pages は非推奨化の流れなので、 これから始めるなら Workers 構成がおすすめです。

セットアップの流れ

pnpm add @opennextjs/cloudflare
pnpm add -D wrangler

wrangler.jsonc で nodejs_compat フラグを有効にするのを忘れずに。

{
  "name": "portfolio",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-06-01",
  "compatibility_flags": ["nodejs_compat"]
}

ハマったところ

症状	原因	対処
ミドルウェアがビルドで落ちる	proxy.ts は Node ランタイム	middleware.ts (Edge) を使う
new Function エラー	Workers は動的評価を禁止	ビルド時レンダリングにする

デプロイは pnpm run deploy 一発。CI からも同じコマンドで自動化できます。