Next.js 16 App Router、WorkersにデプロイしたいけどOpenNextって何？どう使うの？

「Next.jsのApp Routerで書いたやつ、Cloudflare Workersにサーバーレスでサクッとデプロイしたいんだけど、OpenNextってやつがいいらしいじゃん？どうやってやればええん？」って時に使えるプロンプトと、実際動かしてみたらこうなったよって話を書いていくね。

一番雑な投げ方

まずは「とりあえず動かせ」って時のプロンプトだよ。

Next.js 16のApp RouterプロジェクトをOpenNextを使ってCloudflare Workersにデプロイできるように設定して。

これだけで動く。Claudeはプロジェクト構造を読み取って、必要な設定ファイルとかスクリプトを提案してくれるから、あとはコピペでいけるはず。

もうちょい具体的に投げるパターン

もう少し具体的に、デプロイまで見越してClaudeに頼みたいなら、こんな感じで投げるのがおすすめだよ。

wrangler.tomlも一緒に作ってもらうパターン

Cloudflare Workersのデプロイには wrangler.toml っていう設定ファイルがいるんだけど、それもまとめて作ってもらっちゃおう。

Next.js 16のApp RouterプロジェクトをOpenNextでCloudflare Workersにデプロイできるように設定して。
wrangler.tomlもCloudflareアカウントIDとプロジェクト名を含めて作成してね。
CloudflareアカウントID: YOUR_ACCOUNT_ID
Cloudflareプロジェクト名: my-nextjs-app

YOUR_ACCOUNT_IDとmy-nextjs-appは君の環境に合わせて変えて使ってね。

GitHub ActionsでのCI/CD設定も込みでお願いするパターン

手動デプロイはめんどいから、GitHub Actionsで自動デプロイまでやりたいって時はこれ。

Next.js 16のApp RouterプロジェクトをOpenNextでCloudflare Workersにデプロイできるように設定して。
さらに、GitHub Actionsで`main`ブランチへのプッシュ時に自動デプロイされるワークフローも作成して。
CloudflareアカウントID: YOUR_ACCOUNT_ID
Cloudflareプロジェクト名: my-nextjs-app
Cloudflare API TokenはGitHub Secretsに`CF_API_TOKEN`として設定済みだよ。

これで .github/workflows/deploy.yml みたいなファイルも作ってくれるよ。

実践例 / 実録

実際に「くぐる」っていう招待制レストラン推薦アプリをCloudflare Workersにデプロイした時の話なんだけど、Next.js 16のApp Routerを使ってて、デプロイにはOpenNext使ってるんだ。

まず、package.jsonのスクリプトにこんな感じでビルドコマンドを追加したよ。

{
  "scripts": {
    "build:cf": "open-next build"
  }
}

そんで、npm run build:cf を叩くと、通常の npm run build が作る .next ディレクトリじゃなくて、.open-next っていうディレクトリが作られるんだ。これがWorkers用に最適化された成果物が入ってる場所だよ。ここがポイント。.nextの方をデプロイしようとすると動かないから気を付けてね。

ビルドが終わったら、次は wrangler deploy コマンドでデプロイするんだけど、これがまたミソで。

wrangler deploy --minify --node-compat

これでデプロイするんだ。特に重要なのが --node-compat ってオプション。これをつけないと、Next.jsが内部で使ってるNode.jsのモジュール（cryptoとかstreamとか）がCloudflare Workersの環境だと動かなくてエラーになっちゃうことがあるんだよ。ほぼ必須だと思っていい。

このコマンドをGitHub Actionsに仕込んでおけば、mainブランチにコードがマージされたら自動でビルドされて、Cloudflare Workersにデプロイされるってわけ。めっちゃ楽ちんだよ。

あとは wrangler.toml で環境変数とかKVやD1のバインディングを設定しておけば、Workers側でそれらのリソースが使えるようになるんだ。

つまずきポイント

OpenNextとCloudflare WorkersでNext.js App Routerを動かす時に、私が「あちゃ〜」ってなったポイントをいくつか紹介するね。

.nextと.open-nextを間違える: Next.jsの通常のビルドは.nextに成果物を作るけど、OpenNextを使うと**.open-next**にWorkers用の成果物が生成されるんだ。デプロイする時は必ず.open-nextの中身を使うように意識してね。CI/CDのパス設定とかで間違えやすいから注意だよ。
--node-compatを忘れる: Cloudflare Workersは基本的にはWeb標準APIベースで動くから、Next.jsが依存するNode.jsのAPIがないと動かない場合があるんだ。そこでwrangler deployに--node-compatオプションを付けると、Node.jsの互換レイヤーが有効になって、Node.jsの組み込みモジュールが使えるようになるよ。これがないと「モジュールが見つからない！」みたいなエラーによく遭遇するから、忘れずに追加してね。
環境変数の扱い: ローカル開発では.env.localで環境変数を使うけど、Cloudflare Workersにデプロイする時はそのファイルは読み込まれないんだ。だから、wrangler.tomlのvarsセクションに直接書くか、wrangler deploy --var KEY=VALUEで渡すか、GitHub ActionsのSecretsとかで管理してwrangler deploy --secret KEYでセキュアに渡す必要があるよ。特に本番環境で使うシークレットは、--secretを使うのがベストプラクティスだね。

この辺をしっかり押さえておけば、OpenNextでNext.js App RouterをCloudflare Workersにスムーズにデプロイできるはずだよ。