--- title: "VercelとCloudflare Pagesの違い：Next.jsの動かし方・料金の増え方・商用条件で選ぶ【2026年10月】" url: "https://www.issoh.co.jp/tech/details/18587/" published: 2026-10-19 updated: 2026-10-19 categories: ["インフラ・クラウド"] publisher: "株式会社一創" --- # VercelとCloudflare Pagesの違い：Next.jsの動かし方・料金の増え方・商用条件で選ぶ【2026年10月】 VercelとCloudflare Pagesは、どちらもGitにプッシュするだけでサイトを公開できるホスティングですが、サーバー側の処理を動かす基盤と、料金が増える項目がまったく違います。この記事で比べるのは、実行基盤と上限値、Next.jsを動かすvinextとOpenNextの選び方、同じ条件での料金の試算、Hobbyの非商用条件です。Vercelから移すときのwrangler.jsoncと環境変数の移し替えも、2026年10月時点の公式ドキュメントでコマンド付きで示します。 ## まとめ：Next.jsの全機能ならVercel、転送量と商用の無料枠ならCloudflare Next.jsの新機能を設定なしで使い、ISRや画像変換まで含めて手間をかけたくないならVercelです。静的サイトやAPI中心の構成で、転送量が多い、または無料枠のまま商用サイトを置きたいならCloudflareを選びます。 比較の相手は、もはやCloudflare Pagesではありません。Cloudflareは新規プロジェクトの既定をWorkersへ移し、Next.jsをWorkersで動かす推奨の経路もvinextに変えました。Pagesに残す理由は、静的エクスポートのサイトか、DNSをCloudflareに預けられない案件に限られます。 料金の差を生むのは単価ではなく、課金される項目の数です。Vercelは関数のメモリ確保時間とオリジン転送にも課金し、Cloudflareはメモリにも転送量にも課金しません。 ## VercelとCloudflare Pagesの実行基盤・上限値・料金を表で比べる 違いが出るのは、SSRやAPIのようにリクエストごとにコードを動かす部分です。Vercel自体の仕組みは[Vercel（ヴァーセル）とは？サーバー不要の仕組みとできること・料金【2026年】](https://www.issoh.co.jp/tech/details/2964/)で扱っているので、ここではCloudflareと並べたときの差だけを示します。 ### Fluid compute・Node.jsとworkerd・V8 isolateの差 Vercelの関数はFluid computeの上で動くNode.jsで、[Vercel Functionsの上限ページ](https://vercel.com/docs/functions/limitations)はAPIの対応範囲を「Full Node.js coverage」と書いています。npmのパッケージはほぼそのまま動きます。 CloudflareのWorkersは、workerdというランタイムがV8のisolateでコードを動かします。Node.jsのAPIは`nodejs_compat`という互換フラグで補う形で、一部のAPIは部分対応にとどまります。ファイルシステムや子プロセスに依存するパッケージは動かない前提で選定してください。 画像処理にsharpを使う、PDF生成でヘッドレスブラウザを起動する、といった処理はVercelなら動き、Workersでは別のサービスへの切り出しが要ります。 ### メモリ128MBと4GB、CPU時間と実時間で測る上限値の違い 表のCloudflare Workersの上限はFreeとPaidの順です。両社の上限は、測っている単位が違います。Vercelは関数の実行時間（実時間）で区切り、CloudflareはCPUを使った時間で区切ります。 | 項目 | Vercel（Hobby／Pro） | Workers（Free／Paid） | | --------- | ------------------ | ------------------ | | メモリ | 2GB／4GB | 128MB／128MB | | 時間の上限 | 実時間300秒／800秒 | CPU時間10ミリ秒／5分 | | コードのサイズ | 非圧縮250MB | 非圧縮64MiB | | 既定の実行場所 | iad1（米国東部） | リクエストを受けた拠点 | | 無料枠のリクエスト | CDN Requests 月100万 | Worker 日10万 | Cloudflareの値は[Workersの上限ページ](https://developers.cloudflare.com/workers/platform/limits/)（2026年10月12日更新）によります。HTTPリクエストには実時間の上限が無く、外部APIの応答待ちはCPU時間に数えません。逆にメモリ128MBは有料でも増やせず、大きなJSONを丸ごと読む処理はここで止まります。 Workerのサイズは非圧縮64MiBが上限で、圧縮後の上限はありません。OpenNextのドキュメントには旧来の「Free 3MiB・Paid 10MiB」が残っているので、Cloudflare側の値を正としてください。 ### Cloudflare PagesではなくWorkersが比較相手になった2026年の前提 2026年10月時点の比較相手はWorkersです。Cloudflareの雛形生成ツールC3は、明示しない限りWorkersのプロジェクトを作ります。Workersでも静的アセットへのリクエストは無料かつ無制限です。 Pagesの提供が終わるわけではありません。Workersにできないのは、Cloudflareで管理していないDNSのドメインを独自ドメインとして割り当てる構成です。Pagesに残すか移すかの判断は[Cloudflare Pagesの使い方｜公開手順・独自ドメイン・Web Analytics設定とWorkers移行判断](https://www.issoh.co.jp/tech/details/3438/)で詳しく扱っています。 ## Next.jsをCloudflareで動かす2つの経路とVercelとの機能差を確かめる VercelはNext.jsの開発元で、新しい機能は最初にVercelで動きます。CloudflareではWorkersで動かすための仕組みが別に要り、それが2026年に入れ替わりました。 ### next-on-pagesのアーカイブ後に残るvinextとOpenNextの選び方 以前の定番だった`@cloudflare/next-on-pages`は、[GitHubのリポジトリ](https://github.com/cloudflare/next-on-pages)で非推奨と明記され、アーカイブされています。Edge runtimeしか扱えなかったため、Node.js前提のライブラリが動かない問題を抱えていました。 今の選択肢は2つです。[CloudflareのNext.jsガイド](https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/)（2026年8月25日更新）は、Next.jsのAPIをViteのプラグインとして実装し直したvinextを既定の経路として推奨しています。一方のOpenNextは、Next.js本体のビルド結果をWorkers向けに変換するアダプターで、ガイドでは「既存のOpenNextのアプリを保守している場合」の経路という扱いです。 - 新規、またはNext.js 16のアプリで`vinext check`が通る：vinext - Next.js本体のビルドの挙動から外れたくない、または既にOpenNextで動いている：OpenNext - 静的エクスポート（`output: "export"`）だけで済む：Pagesか、Workersの静的アセット vinextはnpm上で1系（2026年10月時点）ですが、Next.jsを再実装したものなので、細かい挙動の差は残り得ます。互換性の詳細と移行手順は[Vinextとは？Next.jsをViteで動かす1.0の使い方とOpenNextとの違い・移行手順](https://www.issoh.co.jp/tech/details/18109/)にまとめました。 ### OpenNextでNode Middlewareとedge runtimeが使えない制約 [OpenNextのCloudflareアダプター](https://opennext.js.org/cloudflare)が対応するのは、Next.js 16の全マイナー版と、14・15の最新マイナー版です。14の対応は2026年第1四半期で終わる予定と書かれています。App Router、ISR、Partial Prerendering、`'use cache'`まで対応表に載っている反面、未対応と明記されている機能もあります。 1つ目は、Next.js 15.2で入ったNode.jsランタイムのMiddlewareです。通常のMiddlewareは動きます。2つ目は`export const runtime = "edge"`の指定で、OpenNextはNode.jsランタイムとして動かすため、デプロイ前にこの行を消すよう求めています。next-on-pagesから移る場合、ここが最初に当たる書き換えです。 ISRのキャッシュにはR2のバケット、タグによる再検証にはD1かDurable Objectsが要り、画像の変換はCloudflare Imagesの別料金です。Vercelでは設定なしで動いていた機能が、部品の組み立てになります。 ### vinext checkとOpenNextのmigrateで互換性を事前に確かめる手順 どちらの経路でも、既存のアプリを壊さずに互換性を確かめるコマンドが用意されています。Gitの作業ブランチを切ってから実行してください。 ``` # vinext：非対応のAPIや設定を一覧で出す（コードは変更しない） npx vinext check # vinext：既存のnext devを残したまま、Vite設定とWorkers設定を追加する npx vinext init npm run build:vinext # OpenNext：wrangler.jsoncやopen-next.config.tsを生成する npx @opennextjs/cloudflare migrate # どちらでも：Workerのサイズを上限（非圧縮64MiB）と比べる npx wrangler deploy --outdir bundled/ --dry-run ``` 最後のコマンドが出す`Total Upload`が非圧縮のサイズです。2026年10月時点の版はwranglerが4系、OpenNextのアダプターが1系です。`vinext check`で非対応が多いなら、次の料金の比較でVercelに残す理由が立たないかを先に確かめます。 ## 帯域・リクエスト・CPUで料金が増える仕組みを月額の試算で比べる 「月20ドル」「月5ドル」という入口の金額では比べられません。請求額は、どの使用量に単価が付くかで決まります。 ### Vercel Proの20ドルとFlat Rate CDNに含まれない関数の課金 Vercel Proは1シート月20ドルで、同額の使用量クレジットが付きます。[Vercelの料金ページ](https://vercel.com/pricing)では、関数のActive CPUが1時間0.128ドル、メモリの確保時間（Provisioned Memory）が1GB時間0.0106ドルからで、どちらも米国東部の単価です。東京（hnd1）ではどちらも約1.6倍に上がります。 CDNの転送とリクエストは、2026年9月に一般提供された[Flat Rate CDN](https://vercel.com/docs/pricing/flat-rate-cdn)で定額の段に変わりました。ただし、CDNから関数までの転送（Fast Origin Transfer）と関数の実行は対象外です。段ごとの容量と東京の単価は[Vercel料金プラン｜Hobby無料枠とPro($20)の中身・超過単価【2026年10月】](https://www.issoh.co.jp/tech/details/8792/)で表にしています。 ### Workers Paidの月5ドルと静的アセット無料・転送量課金なしの条件 [Workersの料金ページ](https://developers.cloudflare.com/workers/platform/pricing/)（2026年10月2日更新）では、Workers Paidは月5ドルからで、Workerへのリクエスト月1,000万回とCPU時間3,000万ミリ秒が含まれます。超過分はリクエスト100万回ごとに0.30ドル、CPU時間100万ミリ秒ごとに0.02ドルです。 課金されないものが多い点が、Vercelとの最大の違いです。静的アセットへのリクエストは無料かつ無制限で、データ転送量と帯域にも追加料金はありません。メモリの確保時間という項目自体がありません。Workers全体の料金体系は[Cloudflare Workersとは？料金・無料枠・Workers Paidの中身と対応言語・使い方](https://www.issoh.co.jp/tech/details/6760/)で扱っています。 ただし、ISRのキャッシュに使うR2やログのWorkers Logsは別に課金される製品です。 ### 月500万リクエスト・転送2TBのSSRサイトで試算した請求額 前述の料金記事で使ったVercelの試算と同じ条件で計算します。日本向けのNext.jsサイトで、月の転送2TB、リクエスト500万回のうち関数の呼び出しが300万回、CPU時間が合計20時間（7,200万ミリ秒）です。 | 項目 | Vercel Pro（東京） | Cloudflare Workers Paid | | -------------- | ------------------------ | ----------------------- | | 基本料金 | 20.00ドル | 5.00ドル | | 月次クレジット | \-20.00ドル | なし | | 転送2TB・静的リクエスト | 20.00ドル（Flat Rate CDNの段） | 0ドル（課金対象外） | | 関数の呼び出し300万回 | 1.80ドル | 0ドル（1,000万回の枠内） | | CPU時間20時間 | 4.04ドル | 0.84ドル（超過4,200万ミリ秒） | | メモリ確保・オリジン転送など | 30.70ドル | 項目なし | | 合計（税別） | 56.54ドル | 5.84ドル | Vercel側は料金記事の試算（Provisioned Memory 1,000GB時間、Fast Origin Transfer 50GB、Deployment Storage 5GBを含む）のままです。Cloudflare側は、CPU時間の平均を1回24ミリ秒として計算しています。ランタイムが違うので同じ処理のCPU時間は一致しませんが、仮に2倍かかってもCPUの超過料金は2.28ドルです。ISRにR2を使う場合のストレージと操作の料金は含めていません。 月50.70ドルの差のうち約6割は、Vercelのメモリ確保時間とオリジン転送です。残りの大半はFlat Rate CDNの段の料金です。キャッシュヘッダーで関数の実行を減らせるサイトなら、前者が小さくなり、差は縮みます。 ## Hobbyの非商用条件と無料枠から本番サイトの置き場所を決める基準 料金の試算より先に決着がつくのが、無料プランで商用サイトを置けるかどうかです。 ### Hobbyは受託や社内ツールも商用扱い、Workers Freeは日10万件で停止 [Vercelのフェアユースガイドライン](https://vercel.com/docs/limits/fair-use-guidelines#commercial-usage)は、Hobbyを非商用の個人利用に限り、商用利用にはProかEnterpriseが必要としています。商用の定義は、制作に関わった誰かの金銭的利益のためのデプロイで、コードを書いた有給の従業員や業務委託者も含みます。社員が業務で作った社内ツールも、この定義では商用です。 Cloudflareの料金ページと上限ページには、無料プランを非商用に限る条件は書かれていません。制約は量のほうです。Workers Freeは1日10万リクエストが上限で、UTCの0時（日本時間の9時）にリセットされます。超えるとError 1027が返り、ルートの設定でWorkerを素通しにするか、エラーを返すかを選べます。月300万回の呼び出しは1日平均10万回なので、上の試算のサイトは無料枠では足りません。 ### Vercelを選ぶ条件とCloudflareを選ぶ条件、見送るべき場面 判断を言い切ると、次のとおりです。 - Next.jsのApp Routerを使い、ISR・画像変換・Middlewareを設定なしで動かしたい：Vercel - メモリ128MBを超える処理や、Node.jsのネイティブモジュールに依存するライブラリがある：Vercel - 静的サイト、SPA、Honoなどで書いたAPIが中心で、転送量が月1TBを超える：Cloudflare - R2やD1、Durable ObjectsなどCloudflareの部品で組みたい：Cloudflare 見送るべき場面もはっきりしています。Vercelで動いているNext.jsのアプリを、月額の差が数十ドルなのにCloudflareへ移すのはやめてください。ISRや画像変換を組み直す工数と移行後の検証が、数年分の差額を上回ります。DNSをCloudflareに預けられない会社がWorkersを選ぶのも誤りで、独自ドメインを割り当てられません。 どちらに置くかを決めたあとのプレビュー環境、本番反映の承認、ロールバックの手順まで含めてデプロイの仕組みを整えたい場合は、[DevOps・CI/CD導入支援](https://www.issoh.co.jp/service/system/devops/)で現在の構成から相談できます。 ## VercelからCloudflare Workersへ移すときの設定ファイルと移行手順 [CloudflareのVercelからの移行ガイド](https://developers.cloudflare.com/workers/static-assets/migration-guides/vercel-to-workers/)（2026年4月23日更新）は、Vercel固有の機能はWorkersでは使えないと最初に断っています。 ### 静的サイトやSPAはwrangler.jsoncのassets指定だけで移せる手順 Vercelのプロジェクト設定の「Build & Development Settings」で、ビルドコマンドと出力ディレクトリを控えます。プロジェクトの直下に次の`wrangler.jsonc`を置けば、ビルド済みのファイルをWorkersの静的アセットとして配信できます。 ``` { "$schema": "node_modules/wrangler/config-schema.json", "name": "my-site", // デプロイする日の日付を入れる "compatibility_date": "2026-10-19", "assets": { // Vercelで控えた出力ディレクトリ（Viteなら dist） "directory": "./dist", // SPAのとき：存在しないパスへのアクセスに index.html を返す "not_found_handling": "single-page-application" } } ``` GitHubのリポジトリをWorkers Buildsにつなぎ、ビルドコマンドはVercelと同じもの、デプロイコマンドは既定の`npx wrangler deploy`のままにします。SPAでないサイトは`not_found_handling`の行を消してください。 ### Next.jsをOpenNextで移すときのwrangler設定とデプロイコマンド Next.jsをOpenNextで移す場合、[OpenNextの導入手順](https://opennext.js.org/cloudflare/get-started)の設定は次の形になります。`migrate`コマンドで生成される内容とほぼ同じです。 ``` // wrangler.jsonc { "main": ".open-next/worker.js", "name": "my-app", "compatibility_date": "2026-10-19", // Node.jsのAPIを使えるようにする "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"], "assets": { "directory": ".open-next/assets", "binding": "ASSETS" }, // serviceはnameと同じ値にする "services": [{ "binding": "WORKER_SELF_REFERENCE", "service": "my-app" }] } // package.json の scripts "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview", "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy" ``` ISRを使うなら、R2のバケットを作って`NEXT_INC_CACHE_R2_BUCKET`という名前でバインドし、`open-next.config.ts`でR2のキャッシュを指定します。`.open-next`は`.gitignore`に足しておきます。 ### 環境変数・独自ドメイン・プレビューURLで詰まる移行時の差分 環境変数は、Vercelから書き出してWorkersのシークレットへ1つずつ登録します。 ``` # Vercelの本番用の値をローカルに書き出す vercel env pull .env.production.local --environment=production # 秘密にする値はシークレットとして登録する（値は対話で入力） npx wrangler secret put DATABASE_URL npx wrangler secret put API_KEY # ローカル開発用の値は .dev.vars に置く（Gitに入れない） echo "NEXTJS_ENV=development" >> .dev.vars ``` `NEXT_PUBLIC_`で始まる値はビルド時に埋め込まれるので、シークレットではなくビルド環境の変数として設定します。Vercel側の環境ごとの値の分け方は[Vercelの環境変数の設定手順：Production・Previewの分け方とvercel env pull・Secret型【2026年10月】](https://www.issoh.co.jp/tech/details/18580/)で確認できます。 独自ドメインは、移行でいちばん詰まる箇所です。Workersのカスタムドメインは、Cloudflareのアカウントにゾーンとして追加済みのドメインにしか割り当てられません。Vercelでは[Vercelの独自ドメイン設定手順：Aレコード・CNAME・ネームサーバーの選び方とSSL発行待ちの対処【2026年10月】](https://www.issoh.co.jp/tech/details/18582/)のようにAとCNAMEだけで済んでいた構成でも、移行先では先にネームサーバーの変更が要ります。具体的な変更手順の参照先は[Cloudflareにドメインを追加する手順：ネームサーバー変更とDNS移行をAPIとdigで確かめる【2026年9月版】](https://www.issoh.co.jp/tech/details/17915/)です。カスタムドメインで新しいWorkerに要求が届くのを確かめてから、Vercelのプロジェクトを消します。 デプロイ直後に古い画面から新しいAPIを呼ぶ問題への対策も、Vercelと同じ挙動にはなりません。原因と対策は[Version Skew（バージョンスキュー）とは？原因とNext.js・Vercelでの対策を実測で解説](https://www.issoh.co.jp/tech/details/9400/)で扱っています。 ## VercelとCloudflare Pagesの比較でよく挙がる質問と公式の回答 VercelとCloudflare Pagesのどちらを選ぶかで出やすい疑問に、公式ドキュメントの記述をもとに答えます。 ### Cloudflare Pagesは無料のまま商用サイトに使えますか？ 使えます。非商用の条件は無く、制約は量だけです。[Pagesの上限ページ](https://developers.cloudflare.com/pages/platform/limits/)によると、Freeは月500ビルド、同時ビルド1本、サイトあたり2万ファイルまでです。Pages Functionsへのリクエストは、Workersの1日10万回の枠で数えられます。 ### Next.jsのSSRはCloudflare Pagesで動きますか？ 2026年10月時点では、SSRを使うNext.jsはPagesではなくWorkersで動かすのが公式の案内です。Pages向けだったnext-on-pagesはアーカイブされました。CloudflareのNext.jsガイドがPagesを挙げているのは、静的エクスポートのサイトを置く場合だけです。SSRやServer Actionsを使うなら、vinextかOpenNextでWorkersへデプロイします。 ### VercelとCloudflareはどちらが表示が速いですか？ 静的なページは、どちらもCDNから返すので差は出にくい部分です。差が出るのはSSRで、Vercelの関数は既定で米国東部のiad1で動くため、日本向けなら東京のhnd1へ変えます。Workersが動くのはリクエストを受けた拠点ですが、データベースが東京にあればそこまでの往復が必要です。速さは関数とデータベースの距離で決まります。 ### Vercelで転送量が急に増えたとき、請求はどこまで膨らみますか？ 新しいチームには既定で200ドルの利用予算が設定され、到達に応じて通知が届きます。上限で全プロジェクトを自動で止める設定も可能です。CDNの転送はFlat Rate CDNの段に収まり、1日だけの急増では段は上がりません。従量のまま残るのは関数の実行とオリジン転送です。 ### Cloudflare Workersの無料枠を超えたら有料プランへ自動で切り替わりますか？ 切り替わりません。Workers Freeのまま上限を超えた日は、Error 1027が返り続けます。日次の上限を外すには、自分でWorkers Paidへ変更します。Paidでは日次の上限が無くなり、月1,000万リクエストを超えた分だけが課金される形です。 ## 関連記事 - [Vercel（ヴァーセル）とは？サーバー不要の仕組みとできること・料金【2026年】](https://www.issoh.co.jp/tech/details/2964/)：Vercelの全体像と他サービスとの位置づけ - [Cloudflare Pagesの使い方｜公開手順・独自ドメイン・Web Analytics設定とWorkers移行判断](https://www.issoh.co.jp/tech/details/3438/)：Pagesに残すかWorkersへ移すかの判断 - [Vercel料金プラン｜Hobby無料枠とPro($20)の中身・超過単価【2026年10月】](https://www.issoh.co.jp/tech/details/8792/)：Flat Rate CDNの段と東京リージョンの単価 - [Cloudflare Workersとは？料金・無料枠・Workers Paidの中身と対応言語・使い方](https://www.issoh.co.jp/tech/details/6760/)：Workers側の料金と使い方 - [Vinextとは？Next.jsをViteで動かす1.0の使い方とOpenNextとの違い・移行手順](https://www.issoh.co.jp/tech/details/18109/)：CloudflareでNext.jsを動かす推奨経路 --- 出典: [VercelとCloudflare Pagesの違い：Next.jsの動かし方・料金の増え方・商用条件で選ぶ【2026年10月】]()（株式会社一創）