こんにちは😊
株式会社プロドウガの@YushiYamamotoです!
JapanLifeStart.comの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️
この記事では、デプロイ先の「主要どころ」を、初心者でも迷いにくいように “何に強いか / 無料枠 / 課金が増えやすいポイント” で比較します。
特に、Next.js(SSG/ISR中心)のメディア運用で「ビルド回数が多い」「従量課金が怖い」と感じた人に刺さるようにまとめます。
まず結論:選び方のコツ
ざっくり言うと、次のどれに当てはまるかで決めるのが早いです。
- 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を叩くと、「全ビルド」ではなく「必要なページだけ更新」に寄せられます。
