Vercel vs Cloudflare Pages: 2026年の費用、性能、DX

結論

小さな静的サイトでは両方とも簡単です。Gitに接続し、pushし、プレビューを確認し、独自ドメインで公開できます。違いは動的処理、課金メーター、チームのレビュー体験で出ます。VercelはNext.js、Preview URL、画像最適化、ISR、ログ、分析が自然につながります。Cloudflare PagesはCDN、DNS、Workers、D1、KV、R2、キャッシュ制御を一つのエッジ基盤で扱えます。

費用

VercelはHobbyが無料、Proは月20ドルからで、転送量、Edge Requests、FunctionsのCPU、メモリ、呼び出し、画像変換、ISRなどを確認します。公式価格ではHobbyに100GB転送、1M Edge Requests、Functions Active CPU 4時間などが含まれます。Proは1TB転送と大きい枠がありますが、超過分は従量課金です。

Cloudflare Pagesは静的配信に強く、Freeでも月500 builds、同時build 1、独自ドメイン100、20,000 filesのような制限があります。動的処理はPages FunctionsまたはWorkersで考えます。Workersは無料で1日100,000 requestsと10ms CPU、Paidでは100万requestsあたり0.30ドル、100万CPU msあたり0.02ドルが目安です。D1やR2を使う場合は別メーターも見ます。

性能

静的ファイルはどちらも高速です。差が出るのはキャッシュ外の処理です。Cloudflareはエッジでrequestを処理し、Cache API、Workers、R2、D1を近い場所で組み合わせやすいです。VercelはNext.jsの配信、画像最適化、ISR、プレビュー、Speed Insightsがまとまっていて、アプリ開発の摩擦が少ないです。

DX

Vercelは非インフラ担当にも説明しやすいです。Pull requestごとのURL、環境変数、rollback、ログが整理されています。Cloudflareはengineer向けの自由度が高く、wranglerで自動化しやすいです。ただし複雑なSSRではWorkers runtime、OpenNext、Node API互換性を確認する必要があります。

選び方

ブログ、文書、landing page、公開ツールはCloudflare Pagesから検討します。Next.js SaaS、認証付きdashboard、頻繁なpreview review、画像最適化が重要ならVercelが良い初期値です。大きなサービスでは、DNSと静的配信はCloudflare、主要Next.js appはVercelという分担も現実的です。

FAQ

個人サイトはどちらですか

静的ならCloudflare Pages、Next.js機能を深く使うならVercel Hobbyが始めやすいです。

Vercelは高いですか

小さい間は無料枠で十分です。画像、関数、転送、ISRが増えると確認すべき項目が増えます。

Cloudflareは動的appに弱いですか

弱いのではなくWorkers型の設計が必要です。Node serverの前提で作ると調整が増えます。

Next.jsなら必ずVercelですか

必ずではありません。ただし最新機能を少ない設定で使うならVercelが楽です。

監視すべき費用は何ですか

Vercelはtransfer、image、function、ISR。CloudflareはWorkers、D1、R2、KV、build数です。

最終判断は

費用と静的配信ならCloudflare Pages、Next.js中心の製品開発ならVercelです。

Useful internal links: Core Web Vitals guide, Next.js metadata guide, DNS setup guide, Cloudflare Pages hosting guide, Tailwind CSS 4 guide.

Sources: Vercel Pricing, Cloudflare Pages Limits, Cloudflare Workers Pricing.