Vercel ProをHobbyに下げるためにNext.jsアプリをCloudflare Pagesに移行した
Vercel Proプランで60以上のNext.jsプロジェクトを運用していましたが、組織向けアプリをCloudflare Pagesに移行することで、Hobbyプラン（無料）へのダウングレードを実現しました。 背景 Vercel Proの課題 Vercel Hobbyプランは非商用・個人利用のみです。組織のアプリをホストしている場合、Proプラン（$20/月〜）を維持する必要があります。 しかし、60以上あるプロジェクトのうち組織向けアプリは2つだけでした。この2つをCloudflareに移せば、残りは個人プロジェクトとしてHobbyプランで運用できます。 移行対象 多言語対応（日本語/英語）の検索アプリ（Next.js + next-intl + Elasticsearch） IIIF画像ビューアアプリ いずれもカスタムドメインで運用中。 Next.js 16の壁 — proxy.tsが未対応 最初にそのままCloudflare Pagesへの移行を試みましたが、ビルドの最終段階でエラーが発生しました。 Node.js middleware is not currently supported. Consider switching to Edge Middleware. Next.js 16では従来の middleware.ts が proxy.ts にリネームされ、Node.jsランタイム固定になりました。@opennextjs/cloudflare v1.18.0時点ではこの新しい proxy.ts に未対応です（opennextjs/opennextjs-cloudflare#962）。 解決策：Next.js 15にダウングレード # package.json "next": "^15.3.1", # 16.x → 15.x "next-intl": "^3.26.5", # 4.x → 3.x（Next.js 15対応版） "eslint-config-next": "^15.3.1", 同時に proxy.ts を middleware.ts にリネームし、エクスポート名も proxy → middleware に変更しました。 Cloudflare Pagesへのデプロイ手順 1. 依存パッケージのインストール npm install --save-dev @opennextjs/cloudflare wrangler 2. 設定ファイルの作成 // open-next.config.ts import { defineCloudflareConfig } from "@opennextjs/cloudflare"; export default defineCloudflareConfig({}); // wrangler.jsonc { "name": "my-app", "pages_build_output_dir": ".open-next/assets", "compatibility_date": "2025-04-01", "compatibility_flags": ["nodejs_compat"] } 3. ビルド npx @opennextjs/cloudflare build 4. Pagesへのデプロイ（ここが最大のポイント） @opennextjs/cloudflare のビルド出力はWorkers向けですが、Pagesにデプロイするには以下の手順が必要です。 ...