はじめに
筆者はNext.jsで個人開発をしております。デプロイする際にデプロイ先をいくつか調べて試したのでこの結果を共有したいと思います。
※2025/03/27時点の内容になります。
前提
- SSRを使用する
- 個人開発では収益がほぼないため、できるだけ費用を抑えることを重視
選択肢
今回は以下の4つのデプロイ先を比較します。
- Vercel
- Netlify
- Cloudflare Workers
- Cloudflare Pages
どのサービスも無料プラン・有料プランがあります。デプロイはどれも簡単でgithubのリポジトリを連携させるだけです。再デプロイもmainブランチなどにpushしたら自動的に行われます。
質問式ワークフロー
簡易的なものですが以下ワークフローを最初参考にしてください。
無料プランの主な制限事項として、超えやすい「サーバーレス関数の実行回数」を比較しました。Cloudflareの場合、厳密にはサーバーレス関数含めたリクエスト回数になると思います。他の制限事項で無料プランを使えない可能性もあるので参考程度でお願いします。
Edge RuntimeとNode.js Runtimeの違い
Next.jsではページ動かす際の方式をこの2つから選べる。デフォルトではNode.js Runtimeになっています。
| Edge Runtime | Node.js Runtime | |
|---|---|---|
| 速度 | 超高速 | 普通 |
| 起動時間 | ほぼゼロ | 少し遅い |
| Node.js API | 使えないものが多い | すべて使える |
| データベース接続 | 非推奨（サーバーレスDBならOK） | OK |
| 向いてる用途 | ミドルウェア、軽量なAPI、認証 | アプリのレンダリング、DBアクセス、重い処理 |
Edge Runtimeの指定方法
// app/page.tsx
export const runtime = "edge"; // 👈 Edge Runtime を使用
export default function Page() {
return <h1>Rendered with Edge Runtime!</h1>;
}
サーバーレス関数とは？
「サーバーを意識せずに、特定の処理を実行できる関数」
例えばSSRのページにてfetchでデータ取得して動的にページを表示する場合、このサーバーレス関数が実行されることになります。静的なページであれば実行されないです。
// app/page.tsx
export default function Page({ data }) {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return <div>{data.message}</div>;
}
デプロイ先、それぞれの詳細
Vercel
主な特徴
-
Next.jsのすべての機能が利用可能（Vercel社が開発しているため）
- ISRは他だと使えない
- パフォーマンスは一番いい気がする
プラン仕様
-
無料プラン（商用利用不可）
- サーバーレス関数の上限：10万回/月
-
有料プラン（$20/月 + 従量課金）
- サーバーレス関数の上限：100万回/月（超過分は100万回ごとに$0.6）
詳細は公式HPを参照↓
Netlify
主な特徴
- Vercelには劣るが、多くのNext.js機能に対応
プラン仕様
-
無料プラン（商用利用可）
- サーバーレス関数の上限：12.5万回/月
- 無料プランは応答速度が遅め（日本向けCDNなし）
-
有料プラン（$19/月 + 従量課金）
- サーバーレス関数の上限：100万回/月（超過分は$25）
- コスパはVercelより悪いため、Vercelの方がおすすめ
詳細は公式HPを参照↓
Cloudflare Pages
主な特徴
メリット
- リクエスト回数無制限
デメリット
- Next.jsの機能が大幅に制限される（Node.js Runtimeが使えない）
- 簡易的なアプリ向け
- デプロイには追加のコード変更が必要
プラン仕様
-
無料プラン（商用利用可）
- リクエスト上限（サーバーレス関数含む）：無制限
-
有料プラン（$20/月 + 従量課金）
詳細は公式HPを参照↓
Cloudflare Workers
主な特徴
メリット
- 有料プランで最安
- Cloudflare PagesよりもNext.jsの機能が充実（Node.js Runtime対応）
デメリット
プラン仕様
-
無料プラン（商用利用可）
- リクエスト上限（サーバーレス関数含む）：10万回/日
-
厳しい制限あり
- CPU処理時間：10ミリ秒以内
- バンドルサイズ：5MB以内（大きめの外部パッケージ入れてたりすると超えます）
-
有料プラン（$5/月 + 従量課金）
- リクエスト上限（サーバーレス関数含む）：1000万回/月
詳細は公式HPを参照↓
まとめ
| デプロイ先 | 無料プランの特徴 | 有料プランのコスパ | Next.jsの機能対応度 |
|---|---|---|---|
| Vercel | 商用利用不可 / 10万回/月 | ◎ | ◎（全機能対応） |
| Netlify | 商用利用可 / 12.5万回/月 | △（Vercelの方が良い） | ○（多くの機能に対応） |
| Cloudflare Pages | 商用利用可 / 無制限 | ○ | ×（Node.js Runtimeなし） |
| Cloudflare Workers | 商用利用可 / 10万回/日 | ◎（最安） | △（一部機能制限） |
- Next.jsの全機能を使いたいならVercel
- 無料プランで商用利用したいならNetlify
- シンプルなアプリならCloudflare Pages（無料で無制限）
- コスパ重視の有料プランならCloudflare Workers
あなたのアプリに合ったデプロイ先を選んでみてください！