はじめに

Next.jsアプリケーションのデプロイ先として、Vercelは最適な選択肢の1つです。 Vercelは、Next.jsの開発元でもあり、最適化された環境でアプリケーションを ホスティングできます。この記事では、Vercelを使用したデプロイの手順を 詳しく解説します。

事前準備

Vercelでデプロイを始める前に、以下の準備が必要です：

• GitHubアカウント
• Vercelアカウント
• デプロイ対象のNext.jsプロジェクト

Next.jsプロジェクトの確認

デプロイ前に、プロジェクトが以下の要件を満たしているか確認しましょう：

// package.jsonの必須スクリプト
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

GitHubリポジトリの設定

プロジェクトをGitHubにプッシュする手順を説明します：

# Gitリポジトリの初期化
git init

# ステージングとコミット
git add .
git commit -m "Initial commit"

# GitHubリポジトリの作成と接続
git remote add origin https://github.com/username/project-name.git
git branch -M main
git push -u origin main

Vercelプロジェクトの設定

Vercelでプロジェクトを作成する手順は以下の通りです：

1. Vercelダッシュボードにログイン
2. 「New Project」をクリック
3. GitHubリポジトリをインポート
4. プロジェクト設定を確認

デプロイの実行

Vercelでのデプロイは、以下の方法で実行できます：

1. 自動デプロイ

GitHubのmainブランチにプッシュすると、自動的にデプロイが開始されます：

# コードの変更をプッシュ
git add .
git commit -m "Update features"
git push origin main

2. 手動デプロイ

Vercel CLIを使用した手動デプロイも可能です：

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

# デプロイの実行
vercel

# 本番環境へのデプロイ
vercel --prod

カスタムドメインの設定

独自ドメインを設定する手順は以下の通りです：

1. Vercelダッシュボードで「Domains」を選択
2. 「Add Domain」をクリック
3. ドメイン名を入力
4. DNSレコードを設定

# Aレコード
A     @     76.76.21.21

# CNAMEレコード
CNAME www   cname.vercel-dns.com.

環境変数の管理

Vercelでの環境変数の管理方法を説明します：

1. ダッシュボードでの設定

1. Project Settings → Environment Variables
2. Add New → 変数名と値を入力
3. 環境の選択（Production/Preview/Development）

2. vercel.jsonでの設定

{
  "env": {
    "API_KEY": "@api-key",
    "DATABASE_URL": "@database-url"
  },
  "build": {
    "env": {
      "NODE_ENV": "production"
    }
  }
}

モニタリングと分析

Vercelは、以下の機能でアプリケーションのパフォーマンスを監視できます：

1. Analytics

• ページビュー数
• 訪問者数
• Core Web Vitals
• エラー率

2. Logs

デプロイログやランタイムログを確認できます：

# CLIでのログ確認
vercel logs

# 本番環境のログ
vercel logs --prod

トラブルシューティング

# ローカルでのビルドテスト
npm run build

# Vercel CLIでのデバッグビルド
vercel build --debug

# デプロイメントの詳細確認
vercel inspect <deployment-id>