Cloudflare Workers&PagesにNext.jsをデプロイ（OpenNext）
はじめに
Next.jsといえばVercel利用が普通ですが、CloudflareのWorkers&Pagesを使った場合はどんな感じなんだろう？ということで記事にしました。Cloudflareは無料枠で試しています。
今回は、@opennextjs/cloudflareを使った新規プロジェクトでの内容となってます。
サポートされているNext.jsのバージョンや機能については下記を確認してください。
なお、Windowsの完全なサポートは保証されていないようです。
参考
とりあえず新規でデプロイまでやってみる
1. Cloudflare のアカウント作成
https://cloudflare.com でアカウントを作成。
無料枠があるので気軽にテストできます。
2. プロジェクト作成
今回はNext.jsは15.3.3
npm create cloudflare@latest -- my-next-app --framework=next --platform=workers
# いくつか聞かれますが、App router と Typescript など選択しました
cd my-next-app
3. ローカルに Wrangler をインストール
グローバルではなく、プロジェクトごとのローカルインストールを推奨とのこと。
npm i -D wrangler@latest
4. ログイン・認証確認
初回だけ実行します。
npx wrangler login # 初回だけ実行：ブラウザが自動で開くので、Cloudflareアカウントでログイン
npx wrangler whoami # ログイン確認：成功していればアカウント情報が表示される
5. 開発・デプロイ
CloudflareのWorkers&Pages画面でデプロイ結果は確認できます。
npm run dev # ローカル開発サーバー起動
npm run deploy # Cloudflareにデプロイ
deployが成功するとURLなどが表示されますので、ブラウザで確認します。
とても簡単ですね！
いくつか修正して検証してみます
４つの検証
- shadcn/uiを使う
- public/の画像を表示（next/image利用）
- APIを使う（ダミー値を返す：環境変数も利用）
- middlewareを使う（リダイレクト処理だけ）
構成
/app/page.tsx
/app/api/test/route.ts
/components/Top.tsx
/public/image.webp
middleware.ts
トップページです。問題なさそうでした。
環境変数について
気になったのは、環境変数をどう設定するかです。
今回は.env.localを作成して、以下の内容を記述しています。
.env.local
NEXT_PUBLIC_TEST=your-test
当然デプロイしても自動では反映されませんので、
本番では管理ページの設定で変数とシークレットの箇所で手動登録するか、コマンドで登録かと思います。例：wrangler secret put XXX_XXX
wrangler.jsoncに変数と値を記述して、npm run deployした際に自動登録させる方法もありましたが、これって見えても構わない値のときはいいですが、うっかりミスしやすいのでそもそも使わないほうが良いのかな？と思いました。
最後に
Next.jsといえばVercelなんですが、CloudflareのWorkers&Pagesを使うのはどうなのかな？と思って、今回@opennextjs/cloudflareを試してみました。
まだどんな癖やデメリットがあるかなど知見がないのですが、とりあえず個人開発で試していくのはアリだなって印象でした。
Discussion