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.jsoncに変数と値を記述して、npm run deployした際に自動登録させる方法もありましたが、これって見えても構わない値のときはいいですが、やっぱりミスしやすいのでそもそも使わないほうが良いのかなと思いました。
最後に
Next.jsといえばVercelなんですが、CloudflareのWorkers&Pagesを使うのはどうなのかな？と思って、今回@opennextjs/cloudflareを試してみました。
まだどんな癖やデメリットがあるかなど知見がないのですが、とりあえず個人開発で試していくのはアリだなって印象でした。
Discussion