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

入門 | 35分 で読める | 2025.12.03

公式ドキュメント
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

ポイント: 環境変数はVercelダッシュボードで管理し、Production / Preview / Developmentごとに異なる値を設定できます。

注意: クライアントサイドで使う環境変数はNEXT_PUBLIC_プレフィックスが必要です。サーバー専用の秘密情報にはプレフィックスを付けないでください。

Step 4: 環境変数設定

ダッシュボードから Project → Settings → Environment Variables を開き、次の手順で設定します。

  1. Key と Value を入力
  2. Environment を選択（Production / Preview / Development）
  3. Add をクリック
# Vercel CLI 33+ / https://vercel.com/docs/cli/env
# 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
  1. 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でパフォーマンス監視

まとめ

実践メモ: プルリクエストごとにプレビューURLが自動生成されるため、コードレビュー時に実際の画面を確認しながらレビューできます。

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

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR