VercelからCloudflare OpenNext移行：コスト90%削減

スタートアップの成長を阻むVercelの請求額爆発

Next.jsは現在、Webフロントエンドおよびフルスタックフレームワークの圧倒的な標準です。そして、ほとんどの開発チームはNext.jsを開発したVercelプラットフォームでプロジェクトを開始します。

Vercelのデベロッパーエクスペリエンス（DX）は優れています。Gitの push 一回で無停止デプロイが完了し、プレビューURLが生成され、画像最適化やISR（Incremental Static Regeneration）が特別な設定なしで動作します。

しかし、プロジェクトが成長し、月間アクティブユーザー（MAU）が急増したりトラフィックが爆発したりする瞬間、Vercelは 「最も致命的なクラウド料金爆弾」 へと変貌します。

[Vercel Pro Plan 基本料金: $20/月]
   + Fast Data Transfer (Egress): GBあたり $0.15 (1TB転送時 $150)
   + Serverless Execution (GB-hours): 超過時 $0.18/GB-hr
   + Image Optimization: 5,000枚超過時 1,000枚あたり $5
   + Build Minutes: 基本上限超過時 1,000分あたり $20
---------------------------------------------------
実際の月額請求額: $1,250 ~ $3,500+ /月

特にVercelのEgress（データアウトバウンド）費用と画像最適化料金は、バイラルマーケティングやトラフィックの急増時に、瞬く間に数千ドルの偶発的な請求書を発生させます。

この問題を解決するために、2025/2026年のオープンソースエコシステムが提示した完成形の解答こそが OpenNext です。OpenNextを使用すれば、VercelのベンダーロックインなしにNext.jsアプリを Cloudflare Workers のエッジサーバーレスインフラへデプロイでき、同じトラフィック量において 月額クラウドコストを90%以上削減 できます。

この記事では、VercelとCloudflareの項目別実際のコスト比較から、OpenNext（@opennextjs/cloudflare）のアーキテクチャおよび移行ステップ、Node.js API互換性の処理、そして実戦トラブルシューティングまで詳しく解説します。

Vercel vs Cloudflare Workers 詳細コスト比較

同じサービス規模（月間5,000万ページビュー、2TBトラフィック、画像50,000枚の最適化）を基準に、両プラットフォームの月額請求額を比較してみましょう。

Cloudflareは Egress（ネットワーク転送量）が $0 という画期的なポリシーを維持しており、サーバーレス実行コストもVercelに比べて10分の1水準です。OpenNextへと移行した瞬間、インフラ料金の心配をすることなく、心置きなくサービスをスケールアップできるようになります。

OpenNextの動作原理：Next.jsをエッジランタイムへ移植する

Next.jsは内部的にNode.jsランタイム環境とVercel独自のプロキシに強く結合しています。OpenNextはNext.jsのビルド成果物（.next）を解析し、それをプラットフォームに依存しない標準JavaScriptおよびエッジサーバーレスコード（workerd 互換）へとトランスパイルするアダプターレイヤーです。

[Next.js App Router プロジェクト]
       |
       v  `npx opennextjs-cloudflare`
+----------------------------------------------------------------+
| OpenNext バンドリングエンジン                                   |
|                                                                |
|  ├── Server Bundle  --> Cloudflare Workers (workerd V8 Isolate)|
|  ├── Static Assets  --> Cloudflare Workers Static Assets / R2  |
|  └── Image Optimizer--> Cloudflare Image Resizing / Worker     |
+----------------------------------------------------------------+
       |
       v  `npx wrangler deploy`
[Cloudflare 300+ グローバルエッジネットワークデプロイ完了]

OpenNextがサポートするNext.jsの機能

• App Router & Pages Router の完全サポート
• Server Components (RSC) & Streaming レンダリング
• Server Actions & Route Handlers （POST/GET API）
• ISR (Incremental Static Regeneration) および Revalidation（revalidatePath, revalidateTag）
• Next.js Image Component (<Image />) の自動最適化

ステップ1：移行前のプロジェクト互換性チェック

Next.jsアプリをCloudflare Workersへ移行する前に、エッジランタイムの特性上、チェックしておくべき3つの要素があります。

1. Node.jsネイティブC++バインディングの除去

Cloudflare WorkersはV8分離ランタイム（workerd）上で動作するため、Node.jsの fs、child_process、または sqlite3 のようにC++ネイティブモジュールに依存するライブラリは使用できません。

• bcrypt -> bcryptjs または Web Crypto API (crypto.subtle) へ置き換え
• jsonwebtoken -> jose または hono/jwt へ置き換え
• pg / mysql2 -> pg（Node-compat互換モード）または Cloudflare Hyperdrive / Drizzle ORM へ置き換え

2. nodejs_compat 環境フラグの確認

OpenNext 2025/2026最新バージョンは、Cloudflareの nodejs_compat 互換性フラグを使用して、Buffer、process、AsyncLocalStorage、stream など、ほとんどのNode.jsコアAPIをデフォルトでサポートしています。

ステップ2：@opennextjs/cloudflare のインストールと設定

既存のNext.jsプロジェクトのルートディレクトリでインストールを行います。

パッケージのインストール

# OpenNext Cloudflare アダプターおよび Wrangler のインストール
npm install --save-dev @opennextjs/cloudflare wrangler@latest

open-next.config.ts の作成

プロジェクトルートにOpenNext設定ファイル（open-next.config.ts）を作成します。

// open-next.config.ts
import type { OpenNextConfig } from "@opennextjs/aws/types/open-next.js";
import cache from "@opennextjs/cloudflare/kv-cache";

const config: OpenNextConfig = {
  default: {
    override: {
      wrapper: "cloudflare-node",
      converter: "edge",
      // ISRおよびキャッシュのためのCloudflare KVバインディング接続
      incrementalCache: async () => cache,
      tagCache: async () => cache,
      queue: "dummy",
    },
  },
  middleware: {
    external: true,
    override: {
      wrapper: "cloudflare-edge",
      converter: "edge",
    },
  },
};

export default config;

wrangler.jsonc の作成

Cloudflareデプロイ用の wrangler.jsonc ファイルにWorkersおよびKVキャッシュ設定を追加します。

// wrangler.jsonc
{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "my-nextjs-app",
  "main": ".open-next/worker.js",
  "compatibility_date": "2026-01-01",
  "compatibility_flags": ["nodejs_compat"],

  // Next.jsの静的アセット（CSS, JS, Images）をWorkers Static Assetsとして配信
  "assets": {
    "directory": ".open-next/assets",
    "binding": "ASSETS"
  },

  // ISRキャッシュ保持用KVネームスペース
  "kv_namespaces": [
    {
      "binding": "NEXT_CACHE_WORKERS_KV",
      "id": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  ],

  // DB連携時のSmart PlacementおよびHyperdrive設定
  "placement": {
    "mode": "smart"
  }
}

ステップ3：ローカルビルドとデプロイパイプライン

package.json のスクリプトを修正して、OpenNextビルドとWranglerデプロイを連携させます。

// package.json
{
  "name": "my-nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "build:worker": "opennextjs-cloudflare build",
    "preview": "opennextjs-cloudflare build && wrangler dev",
    "deploy": "opennextjs-cloudflare build && wrangler deploy"
  }
}

ローカルプレビューテスト

デプロイ前にローカル環境でCloudflare workerd ランタイムベースでNext.jsが正常に動作するかテストします。

npm run preview

ターミナルにローカルアドレス（http://localhost:8787）が表示されたら、ブラウザでServer Actions、ルーティング、SSRページのレンダリングが問題なく動作するか確認します。

Cloudflareデプロイの実行

npm run deploy

わずか30秒でNext.jsプロジェクト全体がCloudflareの世界300以上のエッジノードへとデプロイされます！

ステップ4：GitHub Actions CI/CD自動化パイプライン

Vercelの自動デプロイ機能を代替するために、GitHub Actionsパイプラインを構築します。

# .github/workflows/deploy.yml
name: Deploy Next.js to Cloudflare Workers

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Build & Deploy
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"

      - name: Install Dependencies
        run: npm ci

      - name: Build OpenNext Worker
        run: npm run build:worker

      - name: Deploy to Cloudflare Workers
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: deploy

このパイプラインを構築すれば、Vercel Pro Planのビルド時間上限の制約を受けることなく、GitHub Actionsの無料ビルド枠を活用して$0のコストで自動デプロイシステムを完成させることができます。

実戦トラブルシューティング：よく発生する移行エラー

エラー1：Dynamic Code Evaluation (eval) is not allowed

原因：一部のパッケージ（例：古いORMやテンプレートエンジン）が内部的に eval() や new Function() を使用している場合、workerd のセキュリティポリシーに違反します。

解決策：next.config.js にWebpackのターゲットおよびリント設定を追加するか、最新のモジュールへアップデートします。

// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      config.ignoreWarnings = [{ module: /node_modules/ }];
    }
    return config;
  },
};

エラー2：ISR revalidatePath が動作しない

原因：KVネームスペースのバインディング名がOpenNextの想定名称と一致していない。

解決策：wrangler.jsonc の kv_namespaces の binding 名を必ず NEXT_CACHE_WORKERS_KV に指定します。

エラー3：環境変数（process.env）が認識されない

原因：Cloudflare Workersはビルドタイム注入の環境変数とランタイム環境変数を区別します。

解決策：.env ファイルの変数のうちクライアントに公開する変数には NEXT_PUBLIC_ プレフィックスを付け、サーバー専用の秘密鍵は wrangler secret put コマンドで注入します。

npx wrangler secret put DATABASE_URL

移行成功事例：コスト削減レポート

実際のB2B SaaSサービスを提供するテック企業A社の、VercelからCloudflare Workers OpenNextへの移行レポート結果です。

[移行前: Vercel Enterprise/Pro]
- 月平均リクエスト数: 8,500万件
- 月平均Egressトラフィック: 4.2 TB
- 画像最適化: 120,000枚
- 月額請求額: $2,840.00 / 月

[移行後: Cloudflare Workers + R2]
- Workers Paid 基本料金: $5.00
- 追加リクエスト数手数料: $22.50
- Egressトラフィック手数料: $0.00 (無料)
- R2 Storage & Image Resizing: $12.00
- 月額請求額: $39.50 / 月

=> 合計コスト削減率: 98.6% ($2,840 -> $39.50)

A社はインフラ維持コストを98%以上削減しながらも、コールドスタートのレイテンシが従来のVercelの 250msから12msへと短縮されるパフォーマンス向上 まで達成できました。

結論：ベンダーロックインから脱却するスマートな選択

Vercelは初期のアイデアを迅速にプロトタイピングするための最適なプラットフォームです。しかし、サービスが成長しトラフィックが本格化する段階で、Vercelの高額な価格設定に固執することは、企業の財務健全性に致命的な負担を与えます。

OpenNextとCloudflare Workersの組み合わせは、次のような強力なメリットを提供します：

1. Next.jsコードの100%再利用：App Router、Server Actions、ISRなどのコア機能を完璧に維持
2. トラフィック料金$0 (Egress Free)：どれだけ多くのユーザーがアクセスしてもネットワーク転送量の爆弾がありません
3. グローバルエッジレンダリング：世界300都市のエッジノードから10ms未満のコールドスタートで即座に応答

今すぐ小規模なサブプロジェクトからOpenNextへの移行を試してみて、月額請求額が90%以上削減される驚くべきインフラ革新を体験してみましょう。

関連記事：Drizzle ORM + Cloudflare D1：Prismaより99%小さいバンドルでエッジデータベース構築ガイドも併せて確認できます。