Vercelデプロイ入門 - Next.jsアプリを公開

このチュートリアルで学ぶこと

✓ Vercelアカウント作成
✓ GitHubリポジトリ連携
✓ 自動デプロイ設定
✓ 環境変数設定
✓ カスタムドメイン

Step 1: Vercelアカウント作成

1. vercel.com にアクセス
2. Sign Up → Continue with GitHub
3. GitHubアカウントを連携

Step 2: プロジェクトをインポート

1. New Project をクリック
2. Import Git Repository
3. リポジトリを選択
4. Configure Project で設定確認
5. Deploy をクリック

Step 3: ローカルからデプロイ

# Vercel CLIインストール
npm install -g vercel

# ログイン
vercel login

# デプロイ
vercel

# 本番デプロイ
vercel --prod

Step 4: 環境変数設定

Dashboard → Project → Settings → Environment Variables

1. Key と Value を入力
2. Environment を選択（Production/Preview/Development）
3. Add をクリック

# CLIで設定
vercel env add VARIABLE_NAME

# .env.local からインポート
vercel env pull

Step 5: カスタムドメイン

1. Settings → Domains
2. ドメイン名を入力
3. DNSレコードを設定
   - Aレコード: 76.76.21.21
   - またはCNAME: cname.vercel-dns.com
4. SSL証明書は自動発行

Step 6: プレビューデプロイ

- PRを作成すると自動でプレビューURLが生成
- コメントにプレビューURLが投稿される
- マージ前に確認可能

Step 7: vercel.json設定

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "framework": "nextjs",
  "regions": ["hnd1"],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    }
  ]
}

ベストプラクティス

✓ 環境変数は必ずダッシュボードで設定
✓ プレビューデプロイでPRレビュー
✓ Edge Functionsでグローバル配信
✓ Analyticsでパフォーマンス監視

まとめ

VercelはNext.jsに最適化されたプラットフォームで、GitHubと連携した自動デプロイやプレビュー機能が便利です。