【徹底比較】Vercel vs Cloudflare：Next.js向けホスティング

## 1. はじめに

**Next.js** は React ベースのフレームワークとして世界的に利用が増加しています。
SSR（サーバサイドレンダリング）や ISR（インクリメンタル静的再生成）、Edge Functionsなど強力な機能を活用するには、**ホスティング環境側の対応状況**も重要になります。

本記事では、**Next.jsの最新安定版を利用しているプロジェクト**を前提に、**Vercel** と **Cloudflare**（Pages/Workers）の**無料プラン**を中心とした比較を行います。
主に以下の点をカバーします。

- **無料プランの上限・使用感**  
- **Next.jsへの対応状況やデプロイフロー**  
- **パフォーマンスやCDNの比較**  
- **セキュリティやコミュニティの充実度**  
- **有料プラン移行時の費用対効果**  
- **ユースケース別の使い分け推奨**  

本記事の比較を参考に、皆様のプロジェクト環境に合った最適な選択を検討してみてください。

---

### 比較表

以下の表では、それぞれの主な特徴や上限・対応状況などを記号で示しています。
**○：強い・良好 / △：一部制限 / ×：不可** といった形でご覧ください。

| 項目                               | **Vercel (無料プラン)**                              | **Cloudflare Pages/Workers (無料プラン)**                    |
|:----------------------------------|:----------------------------------------------------|:-----------------------------------------------------------|
| **データ転送帯域**                 | 約**100GB**<br>（公正利用の範囲内）                   | **無制限**                                                 |
| **Next.js機能対応**<br>(ISR / SSR / 画像最適化) | **○**（**Node.jsランタイム完全対応**）                  | **△**（**Edgeランタイムのみ**。ISRやnext/imageは未サポート） |
| **CDN拠点数**                     | **グローバル**（クラウド提携エッジ）                   | **グローバル**（世界285以上の拠点）                          |
| **サーバレス関数上限**             | **10秒（無料）～5分（有料）** 実行可能                  | **1リクエスト10ms CPU（無料）～30秒程度（有料）**           |
| **ビルド制限**                     | 1回最大**45分**、月あたり約**100時間**                | 1回最大**20分**、月**500回**                                |
| **超過時の対応**                   | **制限超過でアップグレード要請**<br>（突然の課金リスクも） | **Workersは実行エラーになるだけ**<br>（**自動課金なし**）     |
| **有料プランの例**                 | **Pro：20ドル/月**<br>(帯域1TB、ビルド400hなど)         | **Pages Pro：20ドル/月**<br>＋**Workers従量課金：5ドル/月～** |
| **セキュリティ**                   | **HTTPS標準 / 簡易WAF / DoS対策**                     | **HTTPS標準 / WAF / DDoS緩和 / Bot対策**                    |
| **グローバル配信**                 | **○**（静的ファイルはエッジ配信）<br>ただし動的処理はリージョン固定 | **◎**（静的＆エッジワーカーで**世界中どこでも低遅延**）        |
| **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. ユースケース別の最適プラットフォーム提言

以下の図は、代表的なシナリオごとにどちらがより適しているかをまとめたものです。

```mermaid
flowchart LR
    A[ユースケース選定] --> B[静的サイト中心？]
    A --> C[Next.jsの動的機能活用？]
    A --> D[サーバレスAPIがメイン？]
    A --> E[グローバル配信最重視？]

    B --> F[Cloudflare Pagesが最適]
    C --> G[Vercelが優位]
    D --> H[Cloudflare Workersが有力]
    E --> I[Cloudflareのエッジネットワークがおすすめ]
```

- **静的サイト**  
  - **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](https://vercel.com/docs/limits/fair-use-guidelines)  
- [Vercel Hobby Plan](https://vercel.com/docs/plans/hobby)  
- [Stack Overflow: Vercel Usage Limits](https://stackoverflow.com/questions/78257939/vercel-usage-limits-when-does-it-reset-or-will-it-reset)  
- [Cloudflare Pages: Limits](https://developers.cloudflare.com/pages/platform/limits)  
- [Cloudflare Pages 公式サイト](https://pages.cloudflare.com)  
- [Cloudflare Workers: Pricing](https://developers.cloudflare.com/workers/platform/pricing/)  
- [Cloudflare Pages×Next.js: Supported Features](https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/supported-features)  
- [Next.js on Cloudflare Pagesの制限に関するレポート](https://www.thetombomb.com/posts/nextjs-pages-cloudflare-pages)  
- [Hacker News: Vercel Serverless Functions vs. Cloudflare Workers](https://news.ycombinator.com/item?id=26580102)  
- [Cloudflare vs. Vercel 比較記事 (Codegiant)](https://blog.codegiant.io/p/cloudflare-vs-vercel)

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/