Contents
Next.jsプロジェクト構成の確認とVercel CLI導入
Next.js v14以降ではApp Routerがデフォルトで採用され、プロジェクト構造や設定ファイルに変更点があります。2026年現在の情報に基づくため、将来の技術的詳細（Next.js v14以降、Vercel CLIバージョン31.x）については事実確認が必要です。以下ではVercel CLIの導入手順と注意点について解説します。
Next.js v14以降では app/ ディレクトリが標準的な構造となり、pages/ は非推奨となっています。この変更により、ルーティング設定やAPIルートの配置場所が変わります。Vercel CLIを使用することで、ローカル環境と本番環境の一貫性を保つことが可能になります。
Vercel CLIのインストール手順
Vercel CLIはnpm経由で最新版をインストールできます。以下に手順を示します。
-
Node.jsがインストールされているか確認
node -vを実行し、バージョンが v18以降であることを確認してください。 -
Vercel CLIをグローバルインストール
bash
npm install -g vercel -
CLIのバージョン確認
vercel --versionを実行し、最新版（例: 31.x）が導入されているか確認します。
注意:
.vercel/ディレクトリにデプロイ用設定ファイルが自動生成されるため、ローカルでプレビュー作業を行う際にはこのディレクトリを.gitignoreから除外しないようにしてください。誤ってコミットしてしまうと、ローカル環境の設定が失われる可能性があります。
App Router対応時の特別なデプロイ設定
App Routerを採用したプロジェクトでは、Vercelへのデプロイに特有の設定が求められます。特に動的ルーティングやAPIルートの構成について注意が必要です。
App Routerプロジェクトの特徴
Next.js v14以降では app/ ディレクトリ内にルートファイル（例: page.tsx）を配置し、動的ルーティングは [slug].tsx のように定義します。また、APIルートは app/api/** 内で構成されます。
Vercelへのデプロイに必要な設定ファイル
以下のファイルをプロジェクトのルートディレクトリに配置することで、Vercelとの連携がスムーズになります。
-
vercel.json
デプロイ時のビルド設定やカスタムドメインに関する情報を記載します。例:
json
{
"version": 2,
"builds": [
{"src": "./app/**/*", "use": "@vercel/next"}
]
} -
.env.local
ローカル開発用の環境変数を設定します。本番環境ではVercelのUIから管理可能です。
注意:
vercel devコマンドでローカルでのプレビューが可能になります。これにより、本番環境に近い状態での開発が実現されます。
GitHubリポジトリ連携による自動ビルドフローの構築
GitHubリポジトリとの連携を活用することで、プッシュ時に自動でVercelへのデプロイが可能になります。以下に設定手順を示します。
VercelとGitHubの連携方法
-
VercelアカウントでGitHubを接続
Vercelダッシュボードから「Integrations」→「GitHub」を選択し、認証を行います。 -
リポジトリ選択とプロジェクト作成
GitHubに登録されたNext.jsプロジェクトを選択し、「New Project」ボタンをクリックします。
CI/CDフローの自動化設定
Vercelはプッシュ時に自動でビルドが開始され、デプロイURLが生成されます。以下に自動化のポイントを示します。
-
自動ビルドのトリガー
GitHubリポジトリのmainブランチへのプッシュ時に自動デプロイが実行されます。 -
プレビューデプロイの設定
Pull Requestごとに固有URLが生成されるため、レビュー作業を効率化できます。
カスタムドメイン設定手順（SSL証明書含む）
Vercelにデプロイしたプロジェクトにカスタムドメインを設定する際は、以下の手順で進めます。
カスタムドメインの登録手順
-
ドメインレジストラからDNS管理画面へアクセス
例: GMOインターネットやNamecheapなどの管理者画面を開きます。 -
AレコードとCNAMEレコードの設定
Vercelから提供されるDNS情報を反映します。具体例: -
Aレコード：
@→104.198.168.75,172.67.133.227 - CNAMEレコード：
www→nextjs-XXXXXX.vercel.app
SSL証明書の取得と設定方法
VercelはLet's Encryptを自動で利用してSSL証明書を発行します。手動での設定は不要ですが、以下に注意点を示します。
-
ドメインが準備されているか確認
ドメインを所有していることをVercelが検証しますので、DNS設定の完了後に手続きを行ってください。 -
プロダクション環境への反映
カスタムドメインの設定は、プロジェクト設定画面（Settings → Domains）から行います。
Edge RuntimeとServerless Functionの比較・選定基準
Vercelで利用可能なEdge RuntimeとServerless Functionの違いを比較し、それぞれの使用ケースについて説明します。
Edge Runtimeの特徴と使用ケース
| 項目 | 値 | 補足 |
|---|---|---|
| 実行環境 | エッジサーバー（グローバルに分散） | リクエストを最短距離で処理 |
| レイテンシー | 約50ms以下（平均） | 低遅延が求められる場面に適す |
| 使用ケース | API Gateway、データ変換、クライアントサイドのロジック実行 |
Serverless Functionの利用範囲
| 項目 | 値 | 補足 |
|---|---|---|
| 実行環境 | AWS Lambda（Vercelが管理） | ユーザー認証やデータベースアクセスなど重い処理に適す |
| レイテンシー | 100ms〜300ms（平均） | 複雑な計算や外部API呼び出しに最適 |
| 使用ケース | フォーム送信、ユーザー認証、データベース操作 |
選定時のチェックリスト
- パフォーマンスの要求度: Edge Runtimeは低遅延を実現するが、Serverless Functionはより複雑な処理に適す。
- コスト: Edge Runtimeは無料（Vercelプランによって異なり）で、Serverless FunctionはAPI呼び出しが発生するごとに課金される。
- 使用目的: クライアントサイドのデータ変換にはEdge Runtimeを、バックエンド処理にはServerless Functionを選択。
環境変数管理とプレビューデプロイのベストプラクティス
Vercelでは環境変数をプロジェクトごとに管理でき、セキュリティや運用効率が向上します。以下に具体的な手順と注意点を解説します。
Vercelでの環境変数設定方法
-
環境変数の登録
プロジェクト設定画面（Settings → Environment Variables）から、NEXT_PUBLIC_で始まる変数はクライアントサイドに公開されます。それ以外はサーバーサイドでのみ使用可能です。 -
環境別の管理
production、preview、developmentの各環境に対して異なる設定値を登録できます。
プレビューデプロイの活用シーン
プレビューデプロイはPull Request時に自動で実行され、以下のような場面に役立ちます。
- レビュー作業: 開発者とデザイナーが変更内容を確認しやすい
- UI/UXテスト: 本番環境に近い状態でのテストが可能
- セキュリティ確認: 本番環境とは別のURLで設定値やAPIの動作を検証
重要: プレビューデプロイは、Vercel CLIで
vercel --prodを実行すると本番デプロイと混同しないように注意が必要です。誤って本番環境に変更を反映してしまう可能性があります。
まとめ
Next.js v14以降のプロジェクト構成やVercel CLIの導入には、いくつかのポイントが存在します。特に将来変化する技術的詳細やコマンドの注意喚起は慎重に行う必要があります。また、本記事の内容は2026年現在の情報に基づいており、今後変更される可能性があるため、最新情報の確認を推奨いたします。