VercelはNext.jsの開発元が提供するホスティングプラットフォームで、個人開発者にとって最も使いやすいデプロイ先の一つです。Hobbyプランは無料ですが、賢く使えば商用レベルのWebアプリを運用することが可能です。この記事では、無料枠を最大限に活用するための5つの実践的な戦略を解説します。

戦略1：Hobbyプランの制限を理解して賢く付き合う

Hobbyプランの主な制限を理解することが最初のステップです。制限を知ることで、それを超えないよう設計できます。

Serverless Functionsの実行時間：最大10秒（Proプランは60秒）
帯域幅：月100GB（個人サイトなら十分）
同時デプロイ：1プロジェクトにつき1件
チームメンバー：1名（個人開発には問題なし）
カスタムドメイン：無制限
エッジネットワーク：利用可能

10秒の実行時間制限の対策として、重い処理はバックグラウンドジョブに切り出すか、外部のワーカーサービス（Upstash QStash等）に委譲する設計にします。

戦略2：プレビューデプロイを開発フローに組み込む

Vercelの最強機能の一つがプレビューデプロイです。GitHubのプルリクエストを作成するたびに、自動でデプロイURLが発行されます。これを使えば、本番環境に影響なく変更をテストできます。

featureブランチを切ってプルリクエストを作成する
自動でhttps://myapp-git-feature-xxx.vercel.appのようなURLが発行される
このURLをスマートフォンで確認してレスポンシブチェック
Lighthouse CIでパフォーマンス計測
問題なければmainにマージして本番反映

typescript

// vercel.json - プレビュー環境の設定例
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Robots-Tag",
          "value": "noindex"  // プレビュー環境をクロール対象外に
        }
      ]
    }
  ],
  "redirects": [],
  "rewrites": []
}

// middleware.ts - プレビュー環境の識別
import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
  const isPreview = process.env.VERCEL_ENV === 'preview'

  // プレビュー環境ではBasic認証をかける
  if (isPreview) {
    const auth = req.headers.get('authorization')
    if (!auth || !isValidAuth(auth)) {
      return new NextResponse('Authentication required', {
        status: 401,
        headers: { 'WWW-Authenticate': 'Basic realm="Preview"' }
      })
    }
  }

  return NextResponse.next()
}

function isValidAuth(auth: string): boolean {
  const [, encoded] = auth.split(' ')
  const decoded = Buffer.from(encoded, 'base64').toString()
  const [user, pass] = decoded.split(':')
  return user === process.env.PREVIEW_USER && pass === process.env.PREVIEW_PASSWORD
}

戦略3：Edge FunctionsとServerless Functionsの使い分け

Vercelには2種類のサーバーレス実行環境があります。Edge FunctionsはCDNエッジノードで実行されるため、応答速度が非常に速い反面、Node.js APIの一部が使えません。Serverless Functionsは通常のNode.js環境です。

Edge Functions向き：認証チェック、A/Bテスト、地域別コンテンツ配信、軽量なAPIレスポンス
Serverless Functions向き：データベースクエリ、ファイル操作、外部API呼び出し、重い計算処理

typescript

// app/api/geo/route.ts - Edge Functionの例
export const runtime = 'edge'

import { NextRequest } from 'next/server'

export function GET(req: NextRequest) {
  // Vercelが自動で地域情報をヘッダーに付与
  const country = req.geo?.country ?? 'Unknown'
  const city = req.geo?.city ?? 'Unknown'

  return Response.json({
    country,
    city,
    message: `${city}, ${country}からアクセス中`
  })
}

// app/api/data/route.ts - Serverless Functionの例（デフォルト）
import { db } from '@/lib/db'

export async function GET() {
  // データベース接続はEdge Functionでは使えない
  const data = await db.post.findMany({
    take: 10,
    orderBy: { createdAt: 'desc' }
  })

  return Response.json(data)
}

戦略4：Vercel Analyticsで無料のアクセス解析

VercelはHobbyプランでも基本的なWebアクティビティ分析機能を提供しています。Vercel Analyticsを導入すれば、ページビュー、ユニークビジター、Core Web Vitalsを無料で計測できます。

typescript

# Vercel Analyticsのインストール
npm install @vercel/analytics @vercel/speed-insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/next'
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  )
}

戦略5：デプロイ時間を短縮するテクニック

デプロイ時間が長いと開発体験が損なわれます。Hobbyプランでもビルド時間の最適化は重要です。以下のテクニックでデプロイ時間を短縮できます。

Turbopackを使う：next.config.jsでexperimental.turboを有効化
.vercelignoreで不要ファイルを除外する
next/imageで画像を最適化してLCP改善
ダイナミックインポートで初期バンドルを削減
Prismaのgenearteをpostinstallに設定してビルドエラーを防ぐ

typescript

// next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // Turbopack有効化（ローカル開発の高速化）
  // package.jsonのdevスクリプトに--turboを追加

  // 画像ドメインの設定
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '**.supabase.co',
      },
    ],
  },

  // バンドルアナライザー（開発時のみ）
  ...(process.env.ANALYZE === 'true' && {
    experimental: {
      bundlePagesRouterDependencies: true,
    },
  }),
}

export default nextConfig

// package.json
{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "postinstall": "prisma generate"  // Vercelビルド時にPrismaクライアントを生成
  }
}

ℹ️ 情報

VercelのHobbyプランは個人・趣味プロジェクト向けです。商用利用（収益を得ているサービス）にはProプランが必要です。ただし、ポートフォリオサイトや個人ブログであれば無料プランで十分対応できます。