1. はじめに
Next.js は React ベースのフレームワークとして世界的に利用が増加しています。
SSR（サーバサイドレンダリング）や ISR（インクリメンタル静的再生成）、Edge Functionsなど強力な機能を活用するには、ホスティング環境側の対応状況も重要になります。
本記事では、Next.jsの最新安定版を利用しているプロジェクトを前提に、Vercel と Cloudflare（Pages/Workers）の無料プランを中心とした比較を行います。
主に以下の点をカバーします。
- 無料プランの上限・使用感
- Next.jsへの対応状況やデプロイフロー
- パフォーマンスやCDNの比較
- セキュリティやコミュニティの充実度
- 有料プラン移行時の費用対効果
- ユースケース別の使い分け推奨
本記事の比較を参考に、皆様のプロジェクト環境に合った最適な選択を検討してみてください。
比較表
以下の表では、それぞれの主な特徴や上限・対応状況などを記号で示しています。
○：強い・良好 / △：一部制限 / ×：不可 といった形でご覧ください。
| 項目 | Vercel (無料プラン) | Cloudflare Pages/Workers (無料プラン) |
|---|---|---|
| データ転送帯域 | 約100GB （公正利用の範囲内） |
無制限 |
|
Next.js機能対応 (ISR / SSR / 画像最適化) |
○（Node.jsランタイム完全対応） | △（Edgeランタイムのみ。ISRやnext/imageは未サポート） |
| CDN拠点数 | グローバル（クラウド提携エッジ） | グローバル（世界285以上の拠点） |
| サーバレス関数上限 | 10秒（無料）～5分（有料） 実行可能 | 1リクエスト10ms CPU（無料）～30秒程度（有料） |
| ビルド制限 | 1回最大45分、月あたり約100時間 | 1回最大20分、月500回 |
| 超過時の対応 |
制限超過でアップグレード要請 （突然の課金リスクも） |
Workersは実行エラーになるだけ （自動課金なし） |
| 有料プランの例 |
Pro：20ドル/月 (帯域1TB、ビルド400hなど) |
Pages Pro：20ドル/月 ＋Workers従量課金：5ドル/月～ |
| セキュリティ | HTTPS標準 / 簡易WAF / DoS対策 | HTTPS標準 / WAF / DDoS緩和 / Bot対策 |
| グローバル配信 |
○（静的ファイルはエッジ配信） ただし動的処理はリージョン固定 |
◎（静的＆エッジワーカーで世界中どこでも低遅延） |
| Next.js開発者向け統合度 | ◎（公式開発元。プレビューやISRなどフル機能対応） | △（Edgeランタイムのみ。高度な機能に制限あり） |
2. 無料プランの範囲と上限比較 (a)
Vercel Hobbyプランの特徴
- 月間100GBまでのデータ転送量が目安
- 10GBまでのオリジンサーバー通信
- 100GB-時間までのサーバレス関数実行
-
ビルド時間は月あたり約100時間（6,000分）
- 1回のビルドは最大45分
- プロジェクトごとの独自ドメインは最大50個
- 1日あたりのデプロイ数は100回
- リクエスト数自体は明確な上限なし（ただし公正利用の範囲で制限を受ける可能性あり）
- 無料利用中は自動課金は通常発生しないが、大きく超過する場合はアップグレード要請や機能制限のリスクあり
Cloudflare Pages/Workers無料枠の概要
-
Cloudflare Pages
- ビルド回数：500回/月（1回あたり最大20分）
- 同時実行ビルド：1件
- 静的ファイル配信：リクエスト数無制限・帯域無制限
- 1プロジェクトあたり20,000ファイル、1ファイル最大25MiBまで
- 独自ドメイン：1プロジェクトにつき100個まで
-
Cloudflare Workers（無料プラン）
- 1日あたり10万リクエスト
- 1リクエストあたり10msのCPU時間
- Workers KVのストレージも無料で1GBまで
- 超過時は自動課金されず、単にエラーになる（追加実行不可）
帯域無制限で自動課金リスクが低いのはCloudflareの強みです。大きなトラフィックを扱う可能性がある場合や費用面のリスクを避けたい場合に有利でしょう。
3. 機能比較 (b)
Next.js対応状況とデプロイフロー
-
Vercel
- Next.js開発元だけあって、最新のApp Routerやサーバーコンポーネントに完全対応
- Node.jsランタイムとEdgeランタイム両方をサポート
- ISRやnext/image最適化など、フレームワーク機能がフル対応
- Git連携やプルリクエストのプレビューデプロイがシームレス
-
Cloudflare Pages
- @cloudflare/next-on-pages アダプタを導入することでEdgeランタイム中心にNext.jsを動かせる
- Node.jsランタイム必須の機能（ISR / next/image最適化）は現時点で非対応
- Git連携やプレビューURLもサポートされるが、Vercelほど設定不要ではない
Next.jsの高度な機能（ISRや画像最適化、API Routes）をフル活用したいならVercelが断然スムーズです。Cloudflareは静的サイトや軽いSSRだけなら問題ありませんが、どうしても制限が多い点を認識しておきましょう。
ビルド最適化の違い
- Vercel：Next.jsに最適化されたCI/CDがあり、ビルドやキャッシュ戦略を自動で最適化
- Cloudflare Pages：Gitコミット時に自動デプロイやプレビューURLが用意されるが、Next.jsの場合アダプタ設定など一手間必要
4. パフォーマンス評価 (c)
レスポンス速度とCDNの比較
-
Cloudflare
- 285以上のエッジデータセンターを備え、静的ファイルをグローバルキャッシュ
- Workers は各拠点で実行されるため、世界中どこからでも低遅延
-
Vercel
- 静的ファイルはCDNでグローバル配信
- サーバレス関数はデフォルトで単一リージョン実行
- Edge Functionsを使えば分散実行可能だが、利用できるNode.js APIが限定的
世界規模のユーザーからの動的リクエストを最速で捌きたいなら、Cloudflare Workersのエッジ実行が有利です。ただ、多くのNext.jsアプリではキャッシュやISRを活用すれば、Vercelでも十分に高速化できます。
スケーラビリティと処理能力
-
Cloudflare
- 無料でも帯域無制限
- Workersは短時間処理向けだが、従量課金で1千万リクエスト/月以上も容易に拡張
-
Vercel
- サーバレス関数は必要に応じて自動スケール
- 無料プランはリミット超過時にアップグレードが必須
- 長時間の処理（数十秒〜数分）はVercelのほうが対応しやすい
長時間計算やNode.jsライブラリが必要な処理はVercelが得意、高頻度の軽い処理を世界中で同時にというユースケースはCloudflareが優位です。
5. サポート・コミュニティ (d)
ドキュメント充実度と問い合わせ対応
-
Cloudflare
- 幅広い機能（CDN、セキュリティ、Workers）に関する包括的ドキュメント
- フォーラムやチュートリアルが豊富
- 有料プランでチケットサポート
-
Vercel
- Next.jsと一体化したドキュメントが豊富
- DiscordやフォーラムでNext.jsに特化したコミュニティが活発
- 有料プランでメールサポート
コミュニティの活発度
- Cloudflare: 幅広い技術領域の開発者が集い、全方位でノウハウが共有されている
- Vercel/Next.js: Reactエコシステムに深く根差し、アプリ開発周りの情報は非常に多い
6. セキュリティ・信頼性 (e)
セキュリティ機能
-
Cloudflare
- 無料プランでもDDoS緩和やWAFの基本機能が利用可能
- 有料プランで高度なBot対策やWAFルール設定を強化
-
Vercel
- 基本的なHTTPS化や簡易WAFを無料プランでも提供
- 大規模DDoS対策などはCloudflareなど外部サービスを組み合わせる例も多い
稼働実績と信頼性
-
Cloudflare
- 世界中のサーバーを冗長化し、障害時も別経路へ迅速に切り替え
- 大手SNSや政府サイトのトラフィックを支えた実績
-
Vercel
- AWSやGCPなどの大手クラウド基盤を利用
- Next.jsブームで急成長しているが、大規模障害は少ない
7. 有料プランと費用対効果 (f)
プランアップグレード時の料金と追加機能
-
Vercel Pro
- 月額20ドルから
- 帯域1TB、ビルド時間400時間まで拡張
- 関数実行時間やカスタムWAFルールも拡充
-
Cloudflare Pages Pro
- 月額20ドル
- ビルド回数増加、同時ビルド5件など
- 静的ファイル配信の帯域は無料でも無制限のまま
-
Cloudflare Workers 有料プラン
- 月額5ドル～
- 月1,000万リクエスト・30億CPUミリ秒分が含まれ、超過は従量課金で低コスト
大規模アクセスや大量リクエストをさばく場合は、Cloudflareの従量課金が圧倒的に割安なことが多いです。小〜中規模ならVercelの無料枠で十分というプロジェクトも多く、開発効率とコストの両面でメリットがあります。
8. ユースケース別の最適プラットフォーム提言
以下の図は、代表的なシナリオごとにどちらがより適しているかをまとめたものです。
-
静的サイト
- Cloudflare Pages が最適（帯域無制限・グローバルキャッシュ・無料解析も利用可）
-
動的コンテンツ
- Vercel が優位（Next.jsフル機能対応で開発効率◎）
-
サーバレスAPI
- Cloudflare Workers が有力（グローバル分散で低遅延・無料枠豊富）
-
グローバル配信
- Cloudflare が最適（285以上の拠点でエッジ処理、帯域無制限）
9. 結論
総合的な比較と推奨ポイント
-
Vercel
- Next.jsアプリ構築なら最強の使い勝手
- ISR/SSR/画像最適化/プレビューなど本家機能をフル活用できる
- 中小規模なら無料プランでも十分な性能とコスパ
- 大規模アクセス時は帯域上限・関数実行時間に注意し、プロプラン以上を検討
-
Cloudflare
- 静的サイトやサーバレスAPIに強み
- エッジネットワークが世界的に広範で、帯域無制限・DDoS対策も充実
- 有料プランも従量課金がリーズナブルで、大規模サイト向けに拡張しやすい
- ただしNext.jsのSSRやISR、画像最適化には制限があるため要確認
「完全なNext.js機能を活かしたいならVercel」「静的サイトやサーバレスAPI、グローバル配信ならCloudflare」 と使い分けるのが基本方針です。
もちろん、両方を組み合わせて使う事例も少なくありません。要件や予想トラフィックに応じて、最適な構成を見極めてください。
参考文献
- Vercel Fair Use Guidelines
- Vercel Hobby Plan
- Stack Overflow: Vercel Usage Limits
- Cloudflare Pages: Limits
- Cloudflare Pages 公式サイト
- Cloudflare Workers: Pricing
- Cloudflare Pages×Next.js: Supported Features
- Next.js on Cloudflare Pagesの制限に関するレポート
- Hacker News: Vercel Serverless Functions vs. Cloudflare Workers
- Cloudflare vs. Vercel 比較記事 (Codegiant)