Vercel ProをHobbyに下げるためにNext.jsアプリをCloudflare Pagesに移行した

Mon, 06 Apr 2026 19:00:00 +0900

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にデプロイするには以下の手順が必要です。

Opennextjs on デジタルアーカイブシステムの技術ブログ