3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

🚀【2026年版】Vercel / Netlify / Cloudflare Pages / Render…主要デプロイ先を「強み・無料枠・課金ポイント」で一気に比較!

3
Last updated at Posted at 2026-02-03

こんにちは😊
株式会社プロドウガ@YushiYamamotoです!
JapanLifeStart.comの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

この記事では、デプロイ先の「主要どころ」を、初心者でも迷いにくいように “何に強いか / 無料枠 / 課金が増えやすいポイント” で比較します。
特に、Next.js(SSG/ISR中心)のメディア運用で「ビルド回数が多い」「従量課金が怖い」と感じた人に刺さるようにまとめます。


まず結論:選び方のコツ

unnamed-4.jpg

ざっくり言うと、次のどれに当てはまるかで決めるのが早いです。

  • Next.jsを“最短で”安定運用したい → Vercel
  • Jamstack(静的+Functions)+統合機能が欲しい → Netlify
  • 静的配信(CDN)に寄せつつエッジ関数も使いたい → Cloudflare Pages + Workers(ただしNext.jsの機能は要注意)
  • 「デプロイ回数が多い」「Nodeで動くアプリをそのまま」運用したい → Render
  • まず動かす・検証が速い → Railway
  • リージョン分散やネットワーク寄りに攻めたい → Fly.io
  • 完全静的でOK・とにかく簡単 → GitHub Pages(制限あり)
  • コスト予測性と自由度が最優先 → 自前(VPS + PaaS)


主要デプロイ先 比較表(2026目安)

価格や無料枠は変わりやすいので、最終判断は公式ページで確認してください。

サービス 何に強いか Next.js相性 無料枠の目安 課金が増えやすいポイント
Vercel Next.jsの開発体験と運用が最短(標準機能が揃う) かなり強い Hobby(無料枠)あり(詳細は公式Pricingへ) vercel Edge/Functions/帯域など“使った分”で増えやすい(構成依存)
Netlify Jamstack運用(静的+Functions/周辺機能) 強い(構成次第) Free: 300 credits/月、Personal: 1,000、Pro: 3,000 netlify 本番デプロイが多いと credits が溶ける(Production deploy: 15 credits/回) netlify
Cloudflare Pages + Workers 静的配信+エッジ関数(CDN強い) 静的寄り、SSR/ISRは要設計 Pages Free: 500 builds/月、ビルド20分タイムアウト developers.cloudflare / Workers Paid: $5/月〜 developers.cloudflare Pagesのbuild上限、Workersのリクエストやストレージ増(動的を足した分) developers.cloudflare
Render フルスタックPaaS(Web/API/Worker/DB) 強い(Node運用向き) “無料”は静的サイト等に限定されやすい Web ServiceはStarter $7/月など固定費が発生 render、サービス増・常時稼働で月額増
Railway 立ち上げが速いPaaS(検証向き) 強い(Node/DB運用向き) 30日トライアル$5 credits等の案内 railway 使った分課金、credits超過で増える railway
Fly.io リージョン分散・Anycast・VMを近くに置く 強い(自由度高め) “使った分”課金の説明(公式) fly リージョン分散・常時稼働・ストレージ・転送で増えやすい fly
GitHub Pages 超シンプル静的ホスティング 弱い(SSR不可) サイト上限1GB、デプロイ10分timeout、soft帯域100GB/月など docs.github 制限に引っかかる、動的要件が出ると別サービス追加が必要 docs.github
自前(VPS等) 自由度・コスト予測(固定費) 構成次第 無料枠ではなく月額+運用 監視/セキュリティ/障害対応など運用工数がコスト化

図解:迷ったらこのフロー


(実例)Netlify credits が溶けるパターンを計算してみる

たとえば本番デプロイが月150回あるとします。

  • Netlifyの本番デプロイは 15 credits / 回 です。

  • つまり、デプロイだけで
    150 × 15 = 2,250 credits / 月 消費します。

そしてプランの月次creditsは以下です。

  • Personal: 1,000 credits/月
  • Pro: 3,000 credits/月

「帯域は問題ないのに、ビルド回数・デプロイ回数だけで課金が増える」場合、Netlifyでは“本番デプロイ”が支配的になりやすいです。


Next.js(SSG/ISR中心)ならCloudflare Pagesは注意(超重要)

Cloudflare公式ドキュメントでも、フルスタックSSRのNext.jsはWorkers側のガイドを参照するよう案内されています。

また @cloudflare/next-on-pages の対応状況では、Next.jsのISRは「エッジランタイムではISRをビルドできない」ため、ISRページは“再生成なし”の静的フォールバックとして提供される、と説明されています。

さらに「静的ルートの動的オンデマンド処理(Node.jsベース)」はサポートしない、と明記されているので、generateStaticParams を空にして初回アクセスで生成する設計は相性が悪くなりがちです。

「Cloudflare Pagesがダメ」という話ではなく、Next.jsの“使い方”次第です。完全静的(export/事前生成)へ寄せられるなら候補になります。


すぐ試せる:RenderでNext.jsを動かす最小構成(例)

RenderはWeb Serviceが月$7(Starter)など、固定費で始められます。
「デプロイ回数が多い」こと自体でNetlifyのように credits が直撃しにくいので、更新頻度の高いメディア運用には向きやすいです(設計次第)。

render.yaml(例)

render.yaml(Next.jsをWeb Serviceで動かす例)
services:
  - type: web
    name: japanlifestart-web
    env: node
    plan: starter
    buildCommand: "pnpm install --frozen-lockfile && pnpm build"
    startCommand: "pnpm start"
    autoDeploy: true
    envVars:
      - key: NODE_ENV
        value: production
      - key: NEXT_TELEMETRY_DISABLED
        value: "1"
      # Sanityの環境変数例(実際のキーに合わせてください)
      - key: NEXT_PUBLIC_SANITY_PROJECT_ID
        sync: false
      - key: NEXT_PUBLIC_SANITY_DATASET
        sync: false
      - key: SANITY_API_READ_TOKEN
        sync: false

デプロイのイメージ(コマンド例)

# 依存関係
pnpm install

# 本番ビルド
pnpm build

# ローカル起動(RenderのstartCommand相当)
pnpm start

おまけ:オンデマンド更新(ISRっぽい運用)の超シンプル例

Sanity更新のたびに“本番デプロイ”を走らせるのではなく、Next.js側で「特定パスだけ再生成」できると、運用がかなり楽になります(要件に合えば)。

Next.js App Router の再検証ルート例

// app/api/revalidate/route.ts
import { NextResponse } from "next/server";
import { revalidatePath } from "next/cache";

export async function POST(req: Request) {
  const { secret, path } = await req.json();

  if (secret !== process.env.REVALIDATE_SECRET) {
    return NextResponse.json({ ok: false }, { status: 401 });
  }

  revalidatePath(path); // 例: "/posts/some-slug"
  return NextResponse.json({ ok: true, revalidated: path });
}

SanityのWebhookからこのAPIを叩くと、「全ビルド」ではなく「必要なページだけ更新」に寄せられます。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?