VercelとCloudflareの違いは？料金・Next.js対応・選び方を比較

ひよこ

VercelとCloudflare、サイトを公開するならどっちがいい？

ペンギン先生

最初に、HTMLや画像を配る静的サイトなのか、アクセスのたびに処理するアプリなのかを分けよう。Next.jsの標準的な開発・公開の流れを重視するならVercelが候補。静的配信やWorkersでの処理を中心に構成したいならCloudflareが候補になる。必要な機能と利用条件を確かめて決めるといいよ。

ひよこ

どちらも世界中の近いサーバーで処理してくれるんだよね？

ペンギン先生

静的ファイルをCDNから配る場所と、プログラムやDBが動く場所は分けて考えよう。たとえばVercel Functionsは既定では米国のiad1で実行され、リージョンを設定できる。ユーザーに近いCDNを使っていても、毎回呼ぶDBやAPIが遠ければ、その通信時間は残るんだ。

ひよこ

Next.jsはCloudflareでも動かせるの？

ペンギン先生

動かす選択肢はあるよ。ただ、2026年9月確認時点のCloudflare公式ガイドはvinextを標準の選択肢として案内している。Next.jsのAPIを再実装するViteプラグインで、まだベータなんだ。既存のOpenNext向け案内もあるので、採用方式と使う機能の対応状況を確認しよう。「Next.jsなら何でも同じように動く」とは考えないほうがいいね。

ひよこ

個人サイトなら両方無料で使える？

ペンギン先生

無料枠はあるけれど、用途と上限が違うよ。Vercel Hobbyは個人の非商用利用向け。Cloudflare Workersは静的アセット配信とプログラムの実行で料金の扱いが異なるんだ。PVだけでは費用は決まらないので、リクエスト数、CPU時間、転送量、DBや画像処理も分けて見よう。

ひよこ

Workersなら既存のNode.jsアプリをそのまま移せる？

ペンギン先生

WorkersにはNode.js互換機能があるけれど、全APIが同じように動くわけではないよ。互換フラグと日付、パッケージが使うAPIを確認し、本番に近い環境で認証・アップロード・DB接続を試す必要がある。Vercel側も選んだランタイムや実行時間の制約を確認しよう。

ひよこ

起動の速さだけならWorkersが勝つのかな？

ペンギン先生

その比較だけで応答速度の優劣は決められないよ。VercelにもFluid computeによるコールドスタートの軽減がある。初回アクセス、キャッシュに当たる場合、DBを読む場合では時間が違うから、同じアプリで実測して選ぼう。ビルド速度も依存関係やキャッシュの条件をそろえて比べたいね。

ひよこ

データベースもセットで考えたほうがいい？

ペンギン先生

そうだね。CloudflareにはD1・KV・R2などがあり、VercelではMarketplaceを通じたDB連携などを使える。どちらも、保存場所、読み書きの制限、バックアップ、費用まで確認しよう。画面だけを移しても、データを扱う構成全体が同じになるわけではないんだ。

用途別の選び方

以下は機能一覧から考えた選択の目安です。独自の速度・料金ベンチマークを行った結果ではありません。

Next.jsの対応方式はCloudflareの現行ガイド、関数の実行場所はVercelのリージョン設定、DBの選択肢はVercel Storageで確認できます。

無料枠は「用途」と「数え方」を確認

2026年9月26日確認時点の主な条件です。すべての制限を列挙した表ではありません。

出典：Vercel Hobby、Cloudflare Workers Pricing。Cloudflareの静的配信が無料でも、認証・SSR・DBを含むアプリ全体が無料になるとは限りません。Vercelも、Hobbyの用途に合うかを先に確認してください。

デプロイ先を決める前の小さな検証

1. 主要な画面を1つ選ぶ。 静的ページだけでなく、実際に使う認証、フォーム、画像、SSR、DB接続を含めます。
2. 対応方式を固定する。 フレームワーク、アダプター、ランタイムの版を記録します。WorkersのNode.js互換機能は対応APIと設定条件を確認します。
3. 同条件で測る。 同じ地域から初回・繰り返しアクセスの時間を測り、DBへの往復も確認します。起動時間だけで判断しません。Vercel Fluid computeの最適化
4. 想定利用量を費用に置き換える。 PVに加え、1ページで呼ぶAPI数、CPU時間、画像処理、DBの読み書きを見積もります。

静的な個人ブログなら配信とビルドの運用を中心に、ログイン付きのアプリなら実行環境とデータ保存まで含めて比較しましょう。公開の流れを学ぶ方はVercel入門ガイド、アプリの構成から学ぶ方はNext.js入門ガイドへ進めます。

「エッジ」でもDBへの距離は残る

画面の静的ファイルが近いCDNから返っても、APIが毎回遠くのDBを読むなら往復時間が残ります。比較時は「利用者 → 配信拠点」「関数 → DB」を別々に記録します。Vercel FunctionsはDBに近いリージョンへ配置する設定ができ、Cloudflareでも外部データソースを含む実際の通信経路を確認する必要があります。

たとえば月10万PVで1ページが3回APIを呼ぶ設計なら、単純計算で30万回のAPI呼び出しになります。静的ページのPVと同じ数とは限りません。これは料金予測ではなく数え方の例で、キャッシュ、再試行、ボット、CPU時間や追加サービスを別に加えて見積もります。

WorkersのNode.js互換機能は、確認時点では互換日付が2026-08-04以降なら既定で有効です。それ以前の設定とは扱いが異なるため、単にフラグを追加する手順をコピーせず、自分の互換日付で使えるAPIを確認してください。インポートできても未実装のメソッドがある場合があります。

参考資料

以下の一次資料を2026年9月26日に確認しました。料金や対応方式は変更されるため、契約・移行時にも確認してください。

• Vercel Hobby：非商用利用条件、無料枠、上限到達時の扱い。
• Vercel Functions regions：既定リージョンと設定。
• Vercel Fluid compute：同時実行とコールドスタート軽減。
• Vercel Storage：MarketplaceのDB連携とデータ配置。
• Cloudflare Next.js guide：vinextの案内、ベータと互換性、OpenNext向けの別経路。
• Cloudflare Workers Pricing：静的配信、CPU時間、リクエストの無料枠と課金。
• Cloudflare Node.js compatibility：対応APIと互換機能の前提。