---
title: "Vercel料金最適化ガイド【個人開発者のコスト削減術を徹底解説】"
description: "Vercelの料金体系・プラン比較・コスト最適化テクニック10選を徹底解説。ShiftBの実際のコスト推移データと他ホスティングとの比較も公開。"
url: "https://shiftb.dev/articles/vercel-pricing-optimization"
publishedAt: "2026-04-05"
updatedAt: "2026-04-05"
author: "立川修平（ぶべ）"
category: "tools"
tags: ["Vercel", "料金", "コスト最適化", "個人開発", "Next.js"]
---

# Vercel料金最適化ガイド【個人開発者のコスト削減術を徹底解説】

「Vercelって無料で使えるんじゃないの？」——そう思って始めた個人開発。気づけば月額$50を超える請求が来ていた、という経験はありませんか？

Vercelは**Next.jsの開発元が提供するホスティングサービス**で、デプロイの手軽さとパフォーマンスの高さから個人開発者に絶大な人気を誇ります。しかし2025年9月の料金体系リニューアル以降、プランの仕組みが大きく変わり、**「知らないうちに課金が膨らむ」**ケースが急増しています。

実際、ShiftB校長の僕（ぶべ）自身もShiftBのサイトをはじめ、すべてのプロジェクトをVercelで運用しています。無料プランからProプランへの移行、帯域幅の超過、画像最適化コストなど、**一通りの「料金の罠」を踏み抜いてきた**からこそ、伝えられることがあります。

この記事では、2026年4月最新のVercel料金体系を徹底解説し、**個人開発者が実践できるコスト削減術**を10個紹介します。さらに、Cloudflare Pages・Netlify・Railwayとの料金比較や、Next.jsプロジェクトの最適化で費用を35%以上削減した具体的な方法まで網羅。この記事を読めば、**Vercelの月額コストを最小限に抑えながら最大限のパフォーマンスを引き出す方法**が分かります。

## Vercelの料金体系を正しく理解する【2026年最新プラン解説】

### Vercelの3つの料金プラン概要

Vercelは**Hobby（無料）・Pro（$20/月）・Enterprise（カスタム）**の3つのプランを提供しています。2025年9月の大幅リニューアルにより、以前のプラン体系から大きく変わりました。

まず全体像を把握しましょう。

![Vercel公式の料金プランページ。Hobby（無料）・Pro（$20/月〜）・Enterpriseの3プラン](https://shiftb.dev/images/articles/vercel-pricing-optimization-ss-pricing.png)

| 項目 | Hobby（無料） | Pro（$20/月） | Enterprise（カスタム） |
| --- | --- | --- | --- |
| 月額料金 | **$0** | **$20/シート** | 要相談（中央値 約$3,750/月） |
| 帯域幅（Fast Data Transfer） | 100 GB/月 | **1 TB/月** | カスタム |
| Edge Requests | 100万/月 | **1,000万/月** | カスタム |
| サーバーレス関数呼び出し | 100万/月 | 無制限（従量課金） | カスタム |
| ビルド時間 | 100時間/月 | 400時間/月 | カスタム |
| 画像最適化 | 5,000変換/月 | 従量課金 | カスタム |
| 関数メモリ | 固定（1 vCPU / 2 GB） | 設定可能 | 設定可能 |
| 商用利用 | **不可** | 可 | 可 |
| チームメンバー | 1人のみ | 複数人可 | 無制限 |

ここで最も重要なのは、**Hobbyプランは商用利用不可**という点です。個人開発でも広告収益やサブスクリプション課金があるプロダクトは、Proプラン以上が必須になります。

### 2025年9月の料金体系リニューアルで何が変わったか

Vercelは2025年9月に大幅な料金体系の変更を実施しました。主な変更点は以下の3つです。

- **クレジットベースの課金導入**：Proプランに月$20のクレジットが含まれ、超過分に適用できるようになった
- **Enterprise機能のPro降格**：SAML SSO（$300/月アドオン）やHIPAA BAA（$350/月アドオン）がProプランでも利用可能に
- **帯域幅の名称変更**：「Bandwidth」から「Fast Data Transfer」に名称が変更され、計測方法も統一された

この変更により、Proプランのコスパは以前より向上しています。月$20のクレジットで小規模な超過分はカバーされるため、**実質的な追加費用が発生するのは中〜大規模のプロジェクト**からです。

### 見落としがちな「超過料金」の仕組み

Vercelの料金で最も注意すべきなのが超過料金です。Proプランの場合、含まれる枠を超えた分は従量課金されます。

| 項目 | Proプラン含有量 | 超過料金 |
| --- | --- | --- |
| Fast Data Transfer | 1 TB/月 | **$0.15/GB** |
| サーバーレス関数（CPU時間） | — | **$0.128/CPU時間** |
| サーバーレス関数（メモリ） | — | **$0.0106/GB時間** |
| 関数呼び出し | — | **$0.60/100万回** |
| 画像最適化 | — | **$0.05/1,000変換** |
| Edge Middleware | 1,000万回/月 | **$0.65/100万回** |

特に危険なのは**帯域幅（Fast Data Transfer）**です。1 TBを超えると$0.15/GBが発生し、例えば月1.5 TBの転送量だと超過分500 GBで**$75の追加費用**になります。月額$20のプランのはずが、合計$95になる計算です。

### Hobbyプランの隠れた制約——Fair Use Policy

Hobbyプランは無料ですが、Vercelの**Fair Use Policy（公正利用ポリシー）**が適用されます。具体的には以下の制限があります。

- 帯域幅100 GB/月を超えるとサイトが**一時停止**される
- 商用利用が発覚した場合、**強制的にProプランへの移行**を求められる
- 関数のメモリは**1 vCPU / 2 GB固定**で変更不可
- 同時ビルドは**1つまで**

無料だからといって商用プロダクトを運用していると、ある日突然メールが届いてプランアップグレードを迫られる——ということが実際に起きます。

![Vercel料金プラン比較 — Hobby・Pro・Teamの制限と価格](https://shiftb.dev/images/articles/vercel-pricing-optimization-plans.png)

## 無料プラン（Hobby）でどこまでできるか——制限と活用法

### Hobbyプランで個人開発を始めるメリット

とはいえ、Hobbyプランは**個人開発のスタートには最適**です。以下のようなケースなら、完全無料で運用できます。

- ポートフォリオサイトやブログ（**月間PV 5万以下**程度）
- 収益化前のMVP・プロトタイプ
- 個人の学習・実験用プロジェクト
- オープンソースプロジェクトのドキュメントサイト

100 GB/月の帯域幅は、1ページあたり1 MBと仮定すると**約10万PV/月に相当**します。月間1〜2万PVの個人ブログなら余裕で収まります。

### Hobbyプランの具体的な制限値

Hobbyプランの制限を正確に把握しておくことが重要です。

| リソース | Hobby上限 | 個人開発での目安 |
| --- | --- | --- |
| 帯域幅 | 100 GB/月 | 月間5〜10万PV程度 |
| サーバーレス関数呼び出し | 100万回/月 | APIルート中心でも十分 |
| Edge Requests | 100万回/月 | 静的サイトなら余裕 |
| ビルド時間 | 100時間/月 | 1日3回デプロイしても余裕 |
| Active CPU時間 | 4時間/月 | 重い処理がなければOK |
| 画像最適化 | 5,000変換/月 | 画像が多いサイトは注意 |
| Blob Storage | 1 GB | 最低限のファイル保存のみ |
| 同時ビルド | 1 | CI/CDのキュー待ちが発生 |

### Hobbyプランの「商用利用不可」を正しく理解する

Hobbyプランで最も誤解されやすいのが**「商用利用不可」**のルールです。Vercelの定義では、以下のいずれかに該当すると商用利用とみなされます。

- 広告収益を得ているサイト（Google AdSenseなど）
- 有料商品・サービスを販売しているサイト
- サブスクリプション課金があるSaaS
- 企業・法人のコーポレートサイト

逆に、アフィリエイトリンクが一切なく、収益化していない純粋な個人ブログやポートフォリオは**Hobbyプランで問題ありません**。ただし、将来的に収益化する予定があるなら、最初からProプランで始めておくと後の移行がスムーズです。

### Hobbyプランから卒業すべきタイミング

以下のいずれかに該当したら、Proプランへの移行を検討しましょう。

- 帯域幅が**月80 GB**を超えた（上限の80%）
- プロダクトから**1円でも収益**が発生し始めた
- チームメンバーが**2人以上**になった
- 関数のメモリ不足で**タイムアウトエラー**が頻発し始めた
- Preview Deploymentの**パスワード保護**が必要になった

僕（ぶべ）の場合、ShiftBのサイト開発を始めた当初はHobbyプランで運用していましたが、**受講生の申し込みフォーム（＝商用利用）**を設置した時点でProプランに切り替えました。月$20は個人開発者にとって決して小さくない額ですが、商用利用でのTOS違反リスクを考えると必要な投資です。

## 課金が跳ね上がる3大要因と対策

### 要因1：帯域幅（Fast Data Transfer）の超過

Vercelで最もコストが跳ね上がりやすいのが**帯域幅**です。以下のようなパターンで想定以上の転送量が発生します。

- **大きな画像の直接配信**：最適化されていない画像（1枚2〜5 MB）をVercelのCDN経由で配信すると、100 PVで200〜500 MBを消費
- **動画ファイルの配信**：動画をVercelから配信すると、1本10分の動画（約100 MB）が100回再生されるだけで10 GBを消費
- **バズ・トラフィックスパイク**：SNSでバズると短期間で数十GBの帯域幅を消費。Hobbyプランの場合はサイト停止、Proプランの場合は超過料金が発生

**対策**：大きなファイル（画像・動画・PDFなど）は**Cloudflare R2やAWS S3**などの外部ストレージから配信しましょう。Cloudflare R2は**エグレス（転送）料金が無料**なので、帯域幅コストを大幅に削減できます。

### 要因2：サーバーレス関数の実行時間

Vercelのサーバーレス関数は**CPU時間・メモリ・呼び出し回数**の3つの軸で課金されます。以下のような処理が高コストの原因になります。

- **外部API待ち**：AI APIの呼び出し（数秒〜十数秒）を含む関数は、待機時間分もCPU時間にカウントされる場合がある
- **PDF生成・画像処理**：サーバーサイドでの重い処理はCPU時間を大量消費
- **N+1クエリ**：データベースへの非効率なクエリで関数の実行時間が伸びる

**対策**：Vercelの**Fluid Compute**を有効化しましょう。Fluid Computeは関数インスタンスを再利用し、実際のコード実行時間のみ課金する仕組みで、**20〜30%のコスト削減**が見込めます。新規プロジェクトではデフォルトで有効ですが、既存プロジェクトは設定から手動で有効化する必要があります。

### 要因3：画像最適化とEdge Middlewareの見えないコスト

意外と見落とされがちなのが、**画像最適化**と**Edge Middleware**のコストです。

**画像最適化のコスト構造**：

- ソース画像の変換：**$0.05/1,000変換**
- 画像キャッシュ読み取り：**$0.40/100万回**
- 画像キャッシュ書き込み：**$4/100万回**

例えば、ECサイトで1,000枚の商品画像をNext.jsのImageコンポーネントで表示する場合、初回アクセス時に1,000回の変換が発生し、レスポンシブ対応で複数サイズ生成されると**実際は3,000〜5,000変換**になることも。

**Edge Middlewareの罠**：Edge Middlewareはすべてのリクエストの前に実行されます。認証チェックやA/Bテスト、リダイレクト処理をEdge Middlewareで行っている場合、**ページビューの数倍のリクエスト**が発生し、気づかないうちにコストが膨らみます。

**対策**：画像は事前にTinyPNGなどで圧縮し、10 KB以下の小さなアイコンにはNext.jsの`unoptimized`プロップを使いましょう。Edge Middlewareは必要最小限のパスにのみ適用するよう、`matcher`設定を厳密に定義してください。

### 実際の「請求ショック」事例

ShiftBの受講生から報告された実際の事例を紹介します。

- **ケース1**：ブログ記事がバズり、1日で帯域幅50 GBを消費。Proプランの月$20に加えて**追加$7.50が発生**（$20のクレジットで一部相殺）
- **ケース2**：画像ギャラリーサイトで画像最適化が月30,000変換に。**追加$1.50**（少額だが毎月積み上がる）
- **ケース3**：Edge MiddlewareでBot対策を実装し、全リクエストを処理。月間Edge Middleware呼び出しが**5,000万回**を超え、**追加$26が発生**

![コスト最適化テクニック — 静的生成・画像最適化・キャッシュ・外部ストレージ・監視](https://shiftb.dev/images/articles/vercel-pricing-optimization-tips.png)

## 個人開発者向けコスト最適化テクニック10選

### テクニック1：静的生成（SSG）をデフォルトにする

Next.jsのページは、可能な限り**静的生成（SSG）**にしましょう。SSGページはビルド時にHTMLが生成され、Vercelのエッジネットワークからそのまま配信されるため、**サーバーレス関数が一切呼ばれません**。

```tsx
// 良い例：静的生成（コスト最小）
// app/blog/[slug]/page.tsx
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((post) => ({ slug: post.slug }));
}

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

// 悪い例：毎回サーバーサイドレンダリング（コスト大）
// export const dynamic = "force-dynamic"; // これは避ける
```

### テクニック2：ISRの再検証間隔を最適化する

ISR（Incremental Static Regeneration）を使う場合、**再検証間隔（revalidate）**の設定がコストに直結します。

- revalidate: 60（1分ごと）→ 1時間あたり**60回**の関数実行
- revalidate: 3600（1時間ごと）→ 1時間あたり**1回**の関数実行

つまり、再検証間隔を1分から1時間に変更するだけで、**関数実行コストが60分の1**になります。ブログやドキュメントサイトなら、**revalidate: 3600（1時間）以上**で十分なケースがほとんどです。

```tsx
// ISRの再検証間隔を最適化
// app/blog/[slug]/page.tsx
export const revalidate = 3600; // 1時間ごとに再検証

// さらにコスト削減するなら、オンデマンド再検証を使う
// app/api/revalidate/route.ts
import { revalidatePath } from "next/cache";
import { NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const { path } = await request.json();
  revalidatePath(path);
  return Response.json({ revalidated: true });
}
```

### テクニック3：Fluid Computeを有効化する

Fluid ComputeはVercelが提供する**サーバーレス関数の最適化機能**で、有効化するだけで**20〜85%のコスト削減**が期待できます。仕組みは以下の通りです。

- 関数インスタンスを**リクエスト間で再利用**（コールドスタートの削減）
- I/O操作（DB問い合わせ、API呼び出し）の待機中は**CPU時間にカウントしない**
- 1つのインスタンスで**複数リクエストを同時処理**

Vercelダッシュボードの Settings → Functions → Fluid Compute から有効化できます。新規プロジェクトではデフォルトで有効ですが、**2025年9月以前に作成したプロジェクトは手動で有効化が必要**です。

### テクニック4：画像を外部サービスで最適化する

Next.jsのImageコンポーネントはデフォルトでVercelの画像最適化APIを使いますが、これに課金されます。以下の代替手段があります。

- **事前最適化**：アップロード前にTinyPNGやSquooshで圧縮し、`unoptimized`プロップを使用
- **外部ローダー**：Cloudflare ImagesやCloudinaryをNext.jsのカスタムローダーとして設定
- **セルフホストの最適化**：`sharp`をインストールし、ビルド時に画像を最適化

```tsx
// next.config.ts で外部画像ローダーを設定
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./lib/image-loader.ts",
  },
};

// lib/image-loader.ts
export default function cloudflareLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) {
  const params = `width=${width},quality=${quality || 75},format=auto`;
  return `https://your-domain.com/cdn-cgi/image/${params}/${src}`;
}
```

### テクニック5：大きなファイルはVercel外で配信する

動画、PDF、大きな画像（1 MB以上）、ダウンロード用ファイルは、Vercelから配信すると帯域幅を大量に消費します。

- **Cloudflare R2**：エグレス料金無料。S3互換APIで使いやすい。月$0.015/GB/月のストレージ料金のみ
- **AWS S3 + CloudFront**：大規模配信向け。CDN経由で$0.085/GB程度
- **YouTube/Vimeo埋め込み**：動画は外部プラットフォームに任せるのが最もコスト効率が良い

### テクニック6：Edge Middlewareのmatcherを限定する

Edge Middlewareをすべてのリクエストで実行するのは、コスト面で非常に非効率です。`matcher`設定で必要なパスのみに限定しましょう。

```typescript
// middleware.ts
// 悪い例：すべてのリクエストで実行
export function middleware(request: NextRequest) {
  // 認証チェック
}

// 良い例：必要なパスのみに限定
export const config = {
  matcher: [
    "/dashboard/:path*",
    "/api/:path*",
    // 静的アセット・画像・faviconは除外
    "/((?!_next/static|_next/image|favicon.ico).*)",
  ],
};
```

### テクニック7：prefetchを制御する

Next.jsの`Link`コンポーネントはデフォルトで**プリフェッチ**が有効です。つまり、ビューポート内に表示されたリンク先のページを事前に読み込みます。これはUXの向上には効果的ですが、**不要な関数呼び出しと帯域幅消費**の原因になります。

```tsx
// 重要でないリンクはprefetchをオフに
import Link from "next/link";

// ナビゲーションの主要リンクはprefetch有効（デフォルト）
<Link href="/dashboard">ダッシュボード</Link>

// フッターやサイドバーのリンクはprefetch無効
<Link href="/terms" prefetch={false}>利用規約</Link>
<Link href="/privacy" prefetch={false}>プライバシーポリシー</Link>
```

### テクニック8：Vercelのスペンド管理を設定する

Proプランでは**スペンド管理（Spend Management）**機能が使えます。月の予算上限を設定しておけば、超過料金が一定額に達した時点で**アラートを受け取る**ことができます。

- ダッシュボードの Settings → Billing → Spend Management から設定
- **Hard Limit**を設定すると、上限に達した時点でリソースが制限される
- **Soft Limit**を設定すると、メール通知のみで動作は継続

個人開発者なら、**まずはHard Limitを$50/月**に設定しておくことをおすすめします。Proプランの$20 + 超過$30で、最大$50/月に抑えられます。

### テクニック9：不要なPreview Deploymentを削減する

Vercelはデフォルトで**すべてのGitブランチ・PRに対してPreview Deployment**を作成します。これはビルド時間を消費し、Hobbyプランの100時間/月を圧迫します。

- Vercelダッシュボードの Settings → Git で、Preview Deploymentの対象ブランチを限定
- `vercel.json`で`github.enabled: false`を設定し、手動デプロイに切り替え
- 開発中はローカルで`vercel dev`を使い、不要なデプロイを避ける

### テクニック10：キャッシュ戦略を最適化する

適切なキャッシュ設定は、帯域幅とサーバーレス関数の両方のコスト削減に直結します。

```typescript
// APIルートでキャッシュヘッダーを設定
// app/api/posts/route.ts
export async function GET() {
  const posts = await getAllPosts();

  return Response.json(posts, {
    headers: {
      // CDNキャッシュ：1時間、クライアントキャッシュ：5分
      "Cache-Control": "public, s-maxage=3600, stale-while-revalidate=300",
    },
  });
}
```

`s-maxage`はVercelのCDNキャッシュ期間、`stale-while-revalidate`はキャッシュ期限切れ後もバックグラウンドで更新しつつ古いキャッシュを返す設定です。これにより、**同じデータへのリクエストで関数が呼ばれる回数を劇的に減らせます**。

## Vercel vs 他のホスティング——コスト比較

### 主要4サービスの料金プラン比較【2026年4月最新】

Vercelと主要な競合サービスの料金を比較します。為替レートは**1ドル＝150円**で換算しています。

| サービス | 無料プラン | 有料プラン（最安） | 帯域幅（無料枠） | 帯域幅超過料金 |
| --- | --- | --- | --- | --- |
| **Vercel** | $0/月 | Pro $20/月（約3,000円） | Hobby: 100 GB / Pro: 1 TB | $0.15/GB |
| **Cloudflare Pages** | $0/月 | Workers Paid $5/月（約750円） | **無制限（全プラン）** | **なし** |
| **Netlify** | $0/月 | Pro $19/月（約2,850円） | Free: 100 GB / Pro: 1 TB | $0.20/GB |
| **Railway** | トライアルのみ | Hobby $5/月（約750円） | 従量課金（$0.10/GB） | $0.10/GB |

### 帯域幅コストで比較すると？

月間1 TBの帯域幅を使った場合のコストを比較してみましょう。

| サービス | 基本料金 | 帯域幅1 TBのコスト | 月額合計 |
| --- | --- | --- | --- |
| **Vercel Pro** | $20 | $0（1 TB含有） | **$20（約3,000円）** |
| **Cloudflare Pages** | $5 | $0（無制限） | **$5（約750円）** |
| **Netlify Pro** | $19 | $0（1 TB含有） | **$19（約2,850円）** |
| **Railway Hobby** | $5 | $100（従量課金） | **$105（約15,750円）** |

帯域幅だけで見ると、**Cloudflare Pagesが圧倒的に安い**のは明らかです。ただし、Next.jsとの互換性やDX（開発体験）を含めた総合評価では話が変わってきます。

### Next.jsとの相性で比較する

VercelはNext.jsの開発元であり、Next.jsのすべての機能が**設定ゼロで動作**します。他のサービスでは、一部のNext.js機能に制限がある場合があります。

| Next.js機能 | Vercel | Cloudflare Pages | Netlify | Railway |
| --- | --- | --- | --- | --- |
| App Router | **完全対応** | 対応 | 対応 | 対応 |
| ISR / On-demand Revalidation | **完全対応** | 部分的 | 対応 | 対応 |
| Edge Runtime | **完全対応** | **完全対応** | 対応 | 非対応 |
| Middleware | **完全対応** | 対応 | 対応 | 対応 |
| Image Optimization | **ネイティブ** | 要設定 | 対応 | 要設定 |
| Preview Deployment | **自動** | 自動 | 自動 | 手動設定 |
| Fluid Compute相当 | **対応** | Workers（常時起動） | 非対応 | 常時起動 |

### 結局どのサービスを選ぶべきか——ケース別ガイド

僕（ぶべ）の結論は以下の通りです。

- **Next.jsメインの個人開発** → **Vercel一択**。DXの良さと機能の完全対応が圧倒的。月$20は「時間を買う」投資
- **静的サイト・帯域幅重視** → **Cloudflare Pages**。帯域幅無制限・月$5からは破格。ただしNext.jsの一部機能に制限あり
- **コスト最優先・機能は最低限でOK** → **Cloudflare Pages Free**。無料で無制限帯域幅は他にない
- **バックエンド込みのフルスタックアプリ** → **Railway**。データベースもコンテナも1つのプラットフォームで完結。ただし帯域幅コストに注意

## Next.jsプロジェクトの最適化でVercel費用を削減する方法

### レンダリング戦略の見直しで関数実行を最小化

Next.jsのレンダリング戦略は、Vercelのコストに直結する最重要ポイントです。各レンダリング方式のコスト効率を理解しておきましょう。

| レンダリング方式 | 関数実行 | コスト効率 | 適したページ |
| --- | --- | --- | --- |
| SSG（静的生成） | ビルド時のみ | **最高** | ブログ、LP、ドキュメント |
| ISR（増分静的再生成） | 再検証時のみ | **高い** | 更新頻度の低いコンテンツ |
| SSR（サーバーサイドレンダリング） | 毎リクエスト | 低い | パーソナライズされたページ |
| Client-side Rendering | API呼び出し分のみ | 中程度 | ダッシュボード、管理画面 |

**鉄則**：まずSSGで作れないか考える → 更新が必要ならISR → リアルタイム性が必要な部分だけSSR。この優先順位を守るだけで、**関数実行コストを80%以上削減**できるケースがあります。

### ISRの実践——Fast Origin Transferを95%削減した事例

あるブログサイトの事例では、すべてのページをSSRで配信していたところ、90人の訪問者で**Fast Origin Transfer（旧帯域幅）が約280 MB**に達していました。これをISRに切り替えたところ、同じトラフィックで**15 MB以下**に削減できました。**95%の削減**です。

具体的な設定変更は以下の通りです。

```tsx
// Before: SSR（毎リクエストでサーバー処理）
export const dynamic = "force-dynamic";

// After: ISR（1時間ごとに再検証）
export const revalidate = 3600;

// さらに最適化：オンデマンド再検証
// コンテンツ更新時のみ再検証をトリガー
// app/api/revalidate/route.ts
import { revalidateTag } from "next/cache";

export async function POST(request: Request) {
  const { tag } = await request.json();
  revalidateTag(tag);
  return Response.json({ success: true });
}
```

### バンドルサイズの最適化でCDN転送量を削減

JavaScriptバンドルサイズの削減は、帯域幅コストに直接効きます。以下のチェックリストで最適化しましょう。

- **@next/bundle-analyzerで分析**：`npm run build`後にバンドルの内訳を可視化
- **Dynamic Importの活用**：ページ読み込み時に不要なコンポーネントは`next/dynamic`で遅延読み込み
- **不要なライブラリの除去**：moment.js → date-fns、lodash → lodash-es（tree-shakable版）に置き換え
- **フォントの最適化**：`next/font`を使ってフォントをセルフホスト化し、外部リクエストを削減

バンドルサイズを**100 KB削減できれば、月間10万PVのサイトで約10 GB/月の帯域幅節約**になります。

### APIルートの最適化——不要な関数呼び出しを減らす

APIルートの設計もコストに影響します。以下のパターンに気をつけましょう。

- **ポーリングをWebSocketに置き換え**：1秒ごとのポーリングは1日86,400回の関数呼び出しを生む。リアルタイム通信はSupabase RealtimeやPusherを使う
- **バッチ処理**：複数のAPI呼び出しを1つにまとめる。5回のAPIリクエストを1回にすれば、関数呼び出し回数が80%減
- **クライアントサイドキャッシュ**：SWRやReact Queryの`staleTime`を適切に設定し、不要な再フェッチを防ぐ

```tsx
// SWRでキャッシュを最適化
import useSWR from "swr";

function Dashboard() {
  const { data } = useSWR("/api/stats", fetcher, {
    refreshInterval: 60000,     // 1分ごとに更新（5秒ではなく）
    dedupingInterval: 30000,    // 30秒間は重複リクエストを防ぐ
    revalidateOnFocus: false,   // タブフォーカスでの再検証を無効化
  });

  return <StatsDisplay data={data} />;
}
```

## ShiftBの実例——月額コストの推移と最適化の記録

### ShiftBのVercel利用状況

ShiftB（このサイト）は**Next.js + Vercel Pro**で運用しています。コンテンツは記事、コースページ、受講生用ダッシュボードなど、約200ページ以上あります。

現在のVercel月額コストは以下の通りです。

| 項目 | 使用量 | 月額コスト |
| --- | --- | --- |
| Proプラン基本料金 | — | **$20** |
| Fast Data Transfer | 約150 GB/月 | $0（1 TB以内） |
| サーバーレス関数 | 約50万回/月 | $0（クレジットで相殺） |
| 画像最適化 | 約8,000変換/月 | $0（クレジットで相殺） |
| **合計** |  | **$20（約3,000円）** |

この記事で紹介した最適化テクニックを実践した結果、**Proプランの基本料金$20だけで収まっています**。超過料金はゼロです。

### 最適化前後の比較——何をしたか

実は最適化前は月額$35〜45程度かかっていました。以下が改善のタイムラインです。

- **2025年6月**：ShiftBをVercel Proで運用開始。月額$20 + 超過$10〜15程度
- **2025年8月**：記事ページをSSR → ISR（revalidate: 3600）に変更。**関数実行コスト50%減**
- **2025年10月**：画像をCloudflare R2経由で配信するよう変更。**帯域幅30%減**
- **2025年12月**：Fluid Computeを有効化。**関数コストさらに25%減**
- **2026年1月**：Edge Middlewareのmatcherを限定。**Edge呼び出し70%減**
- **2026年3月**：バンドルサイズ最適化（moment.js除去、Dynamic Import導入）。**帯域幅15%減**

これらの積み重ねで、月額$35〜45 → **$20固定**に削減できました。年間換算で**約$180〜300（約27,000〜45,000円）の節約**です。

### 個人開発者として学んだ3つの教訓

ShiftBの運用を通じて学んだ教訓を共有します。

- **教訓1：最初からSSGファーストで設計する**——後からSSRをSSGに変更するのはリファクタリングコストが高い。最初から「このページは本当にSSRが必要か？」と問いかける習慣をつける
- **教訓2：スペンド管理は初日に設定する**——Proプランに切り替えたらその日のうちにHard Limitを設定。僕は$50に設定しており、一度も超えていない
- **教訓3：Vercelダッシュボードの使用量グラフを週1で確認する**——異常なトラフィックや関数実行を早期発見できる。月末に請求書を見て驚くのではなく、週次で監視する

## よくある質問（FAQ）

### Q1. Vercelの無料プラン（Hobby）で商用サービスを運営できますか？

**いいえ、できません。**Hobbyプランは明確に商用利用不可です。広告収益、有料プラン、サブスクリプション課金など、1円でも収益が発生するサービスはProプラン（$20/月）以上が必須です。違反が検出されると、プランアップグレードを求める通知が届き、応じない場合はサービスが停止される可能性があります。

### Q2. Vercel Proプランの$20/月で本当に足りますか？

**多くの個人開発プロジェクトでは足ります。**Proプランには1 TB/月の帯域幅と$20/月の超過クレジットが含まれます。月間PVが10万以下で、この記事の最適化テクニックを実践すれば、基本料金$20だけで運用可能です。ShiftBも実際に$20/月で収まっています。ただし、画像が多いECサイトや、サーバーレス関数を多用するアプリは追加料金が発生しやすいので注意が必要です。

### Q3. VercelからCloudflare Pagesに移行すべきですか？

**Next.jsを使っているなら、基本的にはVercelのままが良い**でしょう。VercelはNext.jsの全機能を設定ゼロで使える唯一のプラットフォームです。ただし、静的サイトがメインで帯域幅コストが問題なら、Cloudflare Pagesへの移行は合理的な選択です。特に月間帯域幅が1 TBを超えるサイトでは、帯域幅無料のCloudflare Pagesに移行することで**数十〜数百ドル/月の節約**が可能です。

### Q4. Vercelの請求が予想より高い場合、どう対処すればいいですか？

**まずダッシュボードのUsageページで原因を特定しましょう。**以下の手順で対処できます。

- Settings → Usage で各リソースの使用量を確認
- 帯域幅が原因なら大きなファイルを外部配信に切り替え
- 関数実行が原因ならSSGやISRへの移行を検討
- Spend ManagementでHard Limitを設定して再発を防止
- Vercelサポートに連絡して、一時的な課金のクレジット付与を相談（対応してくれるケースがある）

### Q5. 個人開発者がVercelに支払う平均月額はいくらですか？

**ShiftBの受講生データでは、平均$15〜25/月（約2,250〜3,750円）です。**内訳としては、約40%がHobbyプラン（$0）、約50%がProプラン（$20）、約10%がProプラン+超過料金（$25〜50）です。ほとんどの個人開発者はProプランの基本料金で収まっています。

### Q6. Vercelの料金は今後値上げされますか？

**可能性は十分あります。**2025年9月の料金改定ではProプランの機能が強化されましたが、同時にEnterprise向けアドオン（SAML SSO: $300/月、HIPAA BAA: $350/月）が追加されています。AIモデルのホスティング需要の高まりとともに、特にサーバーレス関数周りの料金体系が変更される可能性があります。年間プランで現行料金をロックインするのが一つの対策です。

### Q7. Vercelの料金を経費として計上できますか？

**はい、個人事業主・法人なら可能です。**Vercelの利用料は「通信費」または「ソフトウェア利用料」として全額経費計上できます。Proプラン年間$240（約36,000円）をはじめ、超過料金もすべて経費です。ドルでの決済になるため、支払日のレートで円換算して記帳します。確定申告の際はクレジットカード明細とVercelの請求書を両方保管しておきましょう。