ちょっと前まで、僕も「Next.jsはVercel」以外の選択肢を真剣に考えたことがありませんでした。

理由は単純で、「Next.jsはVercelが作ってるんだから、Vercelにデプロイするのが最適解でしょ」という思考停止です。正直、当時の僕は「Netlifyって結局どう違うの？」というレベルの理解でした。

でも、去年の11月——クライアントのLPリニューアル案件でVercel Proへの移行コストを試算していたとき——「え、これ想定より2倍くらいかかるな」となって、本格的に3サービスを比較することになりました。

結局、3ヶ月かけてVercel・Netlify・Cloudflare Pagesを実際に使い比べました。ポートフォリオサイト・SaaSダッシュボード・静的ブログという3種類の異なる構成で試したので、そのまとめを書きます。

結論から言うと：

• 個人・ポートフォリオ → Vercel（体験が一番滑らか）
• フリーランスのクライアント案件 → Netlify（商用利用可）
• グローバル展開・大規模 → Cloudflare Pages（エッジ最速）

「なぜそうなるのか」を理解しないと後で困るので、順番に説明していきます。

比較する前に知っておくべき前提

まず重要な前提を整理します。

Next.jsはVercelが開発しています。つまり、App Router・Server Actions・Partial Prerenderingなどの新機能は、まずVercelで最適に動くように設計されています。

これは公平な比較をする上で、最初に認識しておくべき点です。「Vercelが有利」というのは、ある意味当然の話なんです。

ただし、コスト・チーム規模・用途によって最適解は変わります。それを踏まえて見ていきましょう。

Next.jsとReact CRAの使い分けも、デプロイ先を選ぶ前に確認しておくと判断の助けになります。

Vercel：Next.js公式推奨の強みと、見えにくい落とし穴

強み：体験の良さは断トツ

VercelはGitHubにプッシュするだけでデプロイが走り、プレビューURLが自動生成されます。このフローを一度体験すると、他のサービスに移りにくくなります。

Next.jsのServer Actions・Image Optimization・Edge Functionsとの相性も抜群。特にApp Routerとの組み合わせは、動作が最も安定しています。

# VercelCLIでのデプロイも簡単
npx vercel --prod

正直、ここが微妙：Freeプランの商用利用禁止

Freeプランの制限が、実案件では引っかかりやすい。

特に見落としがちなのが「商用利用の禁止」です。Vercelの利用規約には「Hobby plan is for non-commercial use only」と明記されています。

具体的には：

• 帯域幅：月100GB（画像多めのサイトで3週間で枯渇することも）
• Serverless Function実行時間：5秒/リクエスト
• 商用利用：Hobby（無料）プランは不可

「個人でクライアント案件を1件だけデプロイしてる」状態でも、厳密にはProプランが必要になります。僕もここで3回引っかかりました。（書いてたら少し苦い記憶が蘇った）

Vercelの料金感

プラン	月額	商用利用
Hobby（Free）	$0	❌ 不可
Pro	$20/月	✅ 可

Netlify：商用利用可能なFreeプランとコスト感のバランス

強み：フリーランス向けに現実的

Netlifyの最大の強みは「商用利用がFreeプランでもOK」という点です。

フリーランスでクライアントサイトを数件管理する場合、Vercelの「プランごとに商用/非商用を意識しなければならない」制限を気にせず使えるのが大きいです。

フォームの組み込みもビルトインで対応しており、コンタクトフォームだけのためにサーバーサイドを立てるコストが省けます。

また、Next.js以外のフレームワーク（Astro・SvelteKit・Nuxt）への対応も手厚いので、案件ごとに技術スタックが変わるフリーランスには使いやすい。

正直、ここが微妙：Next.jsの最新機能への対応タイムラグ

Next.jsのApp RouterとServer Actionsについては、Vercelに比べて対応が1〜2テンポ遅れる印象があります。

2026年2月時点の感覚では、基本的な構成は問題なく動くが、Next.jsの最新機能は「動くか動かないか試してみないとわからない」という状態でした。

安定して動かしたいなら、Next.jsのバージョンを1世代落とすか、最新のServer Actions周りの機能は使わない構成にしておくのが無難です。

Netlifyの料金感

プラン	月額	商用利用	帯域幅
Free	$0	✅ 可	100GB/月
Pro	$19/月	✅ 可	1TB/月

Cloudflare Pages：エッジの強みと、Next.jsとの相性問題

強み：帯域幅無制限とエッジ配信

Cloudflare Pagesの最大の強みは「パフォーマンス」と「帯域幅無制限（Free含む）」です。

Cloudflareは世界300以上のエッジロケーションを持っており、ユーザーに地理的に近いサーバーからコンテンツが配信されます。グローバルユーザー向けのサービスでは、Vercel・Netlifyとは体感的に別次元の速度が出ます。

画像・動画が多いサイトで帯域幅を気にせず運用できるのも、コスト管理の観点では大きなメリットです。

// next.config.jsでEdge Runtime対応
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'edge',
  },
}
module.exports = nextConfig

正直、ここが微妙：Next.jsとの相性が発展途上

Next.jsとの相性が、2026年4月時点ではまだ完全ではありません。

Cloudflare PagesはNext.js App Routerへの対応を進めていますが、Server Actionsの完全サポートや、next/imageのCloudflare Image Resize連携など、「動きはするが設定が複雑」という状況が続いています。

純粋な静的サイト（ブログ・会社概要）なら全く問題ないですが、動的なNext.jsアプリは注意が必要です。

Cloudflare Pagesの料金感

プラン	月額	商用利用	帯域幅
Free	$0	✅ 可	無制限
Pro	$25/月	✅ 可	無制限

3サービス比較まとめ

項目	Vercel	Netlify	Cloudflare Pages
Free商用利用	❌ 不可	✅ 可	✅ 可
Free帯域幅	100GB/月	100GB/月	無制限
Next.js App Router	◎ 完全対応	〇 ほぼ対応	△ 一部制限
Server Actions	◎	〇	△
CDN速度（体感）	速い	速い	最速
Proプラン料金	$20/月	$19/月	$25/月
デプロイの手軽さ	◎	〇	〇
分析・ログ機能	充実	充実	Cloudflare Analytics

用途別おすすめの結論

パターン1：個人ポートフォリオ・学習用途 → Vercel

商用利用しない前提なら、Vercelのフリープランが最も体験が良いです。

GitHubリポジトリを紐付けるだけで完結し、プッシュのたびに自動デプロイされます。Next.jsの最新機能をフルに試したい場合は、Vercelが唯一の選択肢と言っても過言ではありません。

ポートフォリオ制作の完全ガイドでプロジェクトを作ったら、Vercelにデプロイするのが最もスムーズです。

パターン2：フリーランスのクライアント案件管理 → Netlify

フリーランスで複数クライアントのサイトを管理するなら、Netlifyの商用利用可能なFreeプランが現実的です。

Vercelで管理するなら、最初からProプラン（月$20）を案件費用として計上する前提で動いた方が後でトラブルが起きません。「Freeで問題なく動いてるし」と放置すると、規約違反になる可能性があります。

パターン3：チーム開発・Next.js最新機能を使いたい → Vercel Pro

チーム開発でNext.jsの最新機能を活用するなら、Vercel Proが最も安全な選択肢です。

ProプランはNetlifyのProとほぼ同価格帯（$20 vs $19）なので、Next.jsをメインで使うならVercelを選ぶ理由の方が多いです。

パターン4：グローバル展開・高トラフィック → Cloudflare Pages

世界ユーザー向けのサービスや、帯域幅が大きくなる可能性があるプロジェクトには、Cloudflare Pagesが有力です。

ただし、Next.jsのSSR機能を多用する構成は、事前に制限事項を確認することをおすすめします。

GitHub Actionsで自動デプロイパイプラインを組む方法を合わせて読むと、どのサービスを選んでもCI/CDを整備できます。

---

ちなみに、SupabaseとNext.jsを組み合わせるプロジェクトの場合、どのデプロイサービスでも環境変数の設定で対応できます。NEXT_PUBLIC_SUPABASE_URLなどはVercel・Netlify・Cloudflare PagesいずれもGUIで設定できるので、ここはサービス間の差がない部分です。

よくある質問

Q: Vercelの無料プランで商用利用はできますか？

A: Vercelの利用規約上、Hobby（無料）プランは「non-commercial use only」と明記されており、商用利用は不可です。クライアントに納品するサイトや収益を目的とするサービスにはProプラン（月$20〜）が必要です。知らずに使い続けるとアカウント停止のリスクがあるため注意してください。

Q: Next.jsのnext/imageはどのデプロイ先でも使えますか？

A: 使えますが、動作の完成度に差があります。Vercelは完全対応でデフォルトのまま動作します。Netlifyも対応していますが若干の設定が必要な場合があります。Cloudflare Pagesはエッジ対応のimage loaderを設定する必要があり、デフォルトのままでは動かないケースがあります。

Q: デプロイ先を後から変更するのは大変ですか？

A: 静的サイト（SSG中心）なら比較的楽に移行できます。SSR・Server Actionsを活用している構成は、プロバイダーごとの設定差異を確認しながら移行する必要があり、半日〜1日の作業を見ておくと安心です。本番と同じ設定でステージング環境を事前に作って動作確認することを強くおすすめします。

Q: 個人ポートフォリオはどこにデプロイするのがベストですか？

A: 商用利用しない前提なら、Vercelが最もおすすめです。GitHubリポジトリを紐付けるだけで自動デプロイが動き、独自ドメインも無料で設定できます。開発体験・速度・安定性のバランスが3サービスの中で最も良いです。

Q: Cloudflare Pagesの帯域幅無制限は本当ですか？

A: 公式の記載では帯域幅無制限とされています。ただし、極端に高トラフィックのケースでは個別の対応が必要になることもあるため、大規模商用利用の場合はCloudflare側への事前確認を推奨します。個人〜中規模サービスの範囲であれば、実質的に制限を気にせず使えます。

---

追記（2026/04/17）： Cloudflare PagesのNext.js 15対応が4月に大きく改善されました。Server ActionsについてはNode.js互換レイヤーの強化により、以前よりかなり安定して動くようになっています。「Cloudflare PagesとNext.jsの相性が心配」だった方は、改めて試してみる価値があります。

あわせて読みたい

• Next.js vs React CRA：2026年どっちを使うべきか比較
• GitHub Actions入門2026｜Next.jsプロジェクトのCI/CD自動化ガイド
• SupabaseをNext.jsポートフォリオに組み込んだ13時間の記録