Next.js を Cloudflare Workers へデプロイするメモ

Next.js で作ったページを Cloudflare Workers で公開するにあたって、OpenNext と Wrangler というツールを使う必要がある。

まずは、opennextjs と wrangler をインストールする。

今回の構成のメモ

Next.js：アプリケーション
OpenNext：Cloudflare Workers に合わせてビルドするツール
Cloudflare Workers：デプロイ先

OpenNextについて

OpenNext は Next.js を Vercel 以外（AWS, Cloudflare, Netlify）で動かせるようにするツールで、Next.js の豊富な機能を Vercel 以外でも使いたい、というニーズに応えるために出来たよう。
Vercel 以外を使いたい理由は、コストや開発者のクラウドサービスの好みなどがあるため。

OpenNext の役割：
Next.js固有の機能を各サーバーレスプラットフォームの仕様に合わせて変換・適応させる「アダプター」の役割を果たす。

Wrangler について

wrangler は cloudflare の開発者用 CLI ツールで、Workers に対する操作をできるようになる。
wrangler.jsonc または wrangler.toml で、開発やデプロイ設定をカスタマイズすることができる。

wrangler の主な役割：

プロジェクトの設定管理：プロジェクトの基本情報や、開発環境と本番環境での設定を管理。
Cloudflareサービス連携：Cloudflare D1（データベース）、R2（オブジェクトストレージ）、Workers AIなどの各種サービスをWorkerから利用するための設定。
環境変数の管理：開発・デプロイ時に必要な環境変数（例: D1データベースのバインディング名など）を設定。

参考URL

一応なんとなく調べてメモしてみたが、ローカルでなんとか Next.js サイト作ってるぐらいの知識なので、Vercel 以外じゃ動かないという所から既によく分からない…

OpenNext と Wrangler をインストールして Workers へデプロイ

まず、Cloudflare Workers の Workers & Pages 管理画面からアプリケーションを作成する。
（ここが今回デプロイされる場所）
その後 OpenNext のサイトに従い OpenNext と Wrangler をインストールした。

そして、以下のファイルを設定。

wrangler.toml（または.jsonc）
open-next.config.ts
.dev.vars
package.json（script 部分に preview や deploy など追加）
.gitignore（.open-next）

pnpm run deploy コマンドでデプロイ。
ローカルでビルドしたデータがアップされるようだ。
デプロイされたURLにアクセスすると、問題なく確認することができた。

次は GitHub のリポジトリからの自動デプロイに挑戦したい。