Contents
Next.jsアプリをVercelでデプロイする前に必要な準備
Next.jsアプリをVercelにデプロイするためには、プロジェクトの基本構成と必要なツールが整っている必要があります。特にGitHubとの連携や環境変数の設定は、本番公開時に重要な役割を果たします。以下では、プロジェクト初期設定と必要なライブラリについて詳しく説明します。
プロジェクト構成の確認
Next.jsプロジェクトをデプロイする際には、以下のファイル・ディレクトリ構造が前提となります。
必須項目とその役割
プロジェクトの正常な動作に必須となる構造を下記の表にまとめました。
| 必須項目 | 内容 | 補足 |
|---|---|---|
pages/ |
クライアントサイドのページコンポーネント | Next.js 13以降ではapp/に移行可能 |
public/ |
静的資産（画像・CSSなど）を配置するディレクトリ | バンドル外でアクセス可能 |
package.json |
プロジェクトの依存関係とスクリプト設定 | vercel devコマンドが有効か確認必須 |
注意: Next.js 13以降では
app/ディレクトリ構造が推奨されています。最新バージョンに合わせたプロジェクト構成を確認してください。
必要ライブラリのインストール
Vercelデプロイには、Next.jsの標準機能で十分ですが、以下のような追加ツールが便利です。
-
Vercel CLI のインストール
bash
npm install -g vercel
このコマンドでローカル環境でのプレビュー確認や手動デプロイが可能になります。 -
GitHub Actions との連携準備
.github/workflows/ディレクトリにワークフロー設定ファイルを配置して、コードプッシュ時に自動化されたCI/CDを構築できます。 -
環境変数管理ツール（例:
dotenv）の導入
テスト環境と本番環境で異なるシークレット値が必要な場合は、npm install dotenvを実行し、.env.localファイルを作成します。
Vercelアカウントの作成と初期設定
Vercelへのデプロイにはアカウント登録が必須です。無料プランでは制限付きですが、Next.jsアプリの公開に必要な機能はすべて利用可能です。以下で新規ユーザー向けのアカウント作成フローをステップごとに解説します。
無料プランの登録手順
Vercelアカウントの登録には以下の3つのステップが必要です。
- Vercel公式サイトへアクセスし、「Sign up」ボタンをクリックします。
- GitHubアカウントまたはメールアドレスでログインします。
- プロフィール画面でプロジェクトの公開設定（例: メインドメインやリポジトリ権限）を整理します。
ポイント: 初期登録時に「Organization」を選択すると、複数のプロジェクト管理がスムーズです。
プロファイル設定のポイント
Vercelアカウントのプロフィール画面では、以下の情報を整えるとデプロイ作業が効率化されます。
- 名前・メール：本番公開時の連絡先として使用されるため正確に登録する
- チーム設定（Team）：複数人での開発時に役立つ、権限管理の有無を確認する
- プラン選択：無料版は制限ありですが、個人プロジェクトには十分な性能が期待できる
GitHubリポジトリとの連携方法
VercelとGitHubを連携させることで、コードプッシュ時に自動デプロイが可能になります。この機能を活用すれば、本番環境の更新作業を手動で行う必要がなくなります。以下に具体的な設定手順を解説します。
OAuth認証によるGitHub連携
VercelとGitHubを連携させるにはOAuth認証が必要です。以下の手順で操作してください。
- Vercelダッシュボードの「Projects」ページから、「New Project」ボタンをクリックします。
- GitHubリポジトリ選択画面で、認証用のOAuthトークンを作成します（Vercelが自動で生成）。
- リポジトリを選択し、「Connect」をクリックして連携完了。
注意点: 複数のブランチにデプロイしたい場合は、「Branch」設定で対象となるブランチ名を指定してください。
リポジトリ選択時の注意点
- リモートリポジトリがGitHubにあること：ローカルPCでのみ作成したリポジトリは連携できません。
- プロジェクト構造がNext.js準拠であること：
pages/またはapp/ディレクトリが存在しないと、Vercelが自動構築を実施できない場合があります。
環境変数の管理とセキュリティ対策
本番環境では、APIキーなどの機密情報は絶対に公開してはなりません。Vercelではプロジェクト設定やGitHub Actionsとの連携で安全に環境変数を管理できます。以下に具体的な方法を解説します。
環境変数の種類と用途
| 種類 | 説明 | 用途例 |
|---|---|---|
| Secrets | デプロイ時にのみアクセス可能な変数 | APIキー、データベースURL |
| Public variables | クライアントサイドでも利用可能な変数 | 公開APIのエンドポイント |
セキュリティチェック: 本番環境では
NEXT_PUBLIC_で始まる変数はすべて公開されるため、機密情報を含まないよう注意してください。
カスタムドメインの設定手順
VercelデフォルトのURL（例: https://myapp.vercel.app）ではなく、独自ドメインを割り当てることでプロダクション環境として使いやすくなります。以下はカスタムドメイン設定までの流れです。
DNS設定の基本フロー
- ドメインプロバイダー（例: GMOインターネットやCloudflare）からDNSレコードを取得します。
- Vercelプロジェクトの「Domains」タブで、独自ドメインを追加し、「Add Domain」ボタンをクリックします。
- DNSレコード（AレコードとTXTレコード）をプロバイダーに登録します。
| レコードタイプ | 値 | 補足 |
|---|---|---|
| Aレコード | [IPアドレス] |
自動取得されるIPアドレス |
| TXTレコード | [トークン] |
ドメイン所有権確認用 |
ポイント: SSL証明書はVercelが自動で発行します。DNS設定後、約10分で有効になります。
プレビューデプロイの活用術
プレビューデプロイ機能を活用すれば、コードレビュー段階でも本番環境に近い状態での検証が可能です。この機能は特にチーム開発において重要です。以下に設定方法と使い方を紹介します。
ブランチベースの自動デプロイ
Vercelでは、ブランチごとに一時的なURLを生成できます。以下の手順で設定してください。
- Vercelプロジェクトの「Settings」→「Git」タブで、デプロイ対象となるブランチ（例:
main）を選択します。 - 「Deployments」セクションで、「Branch」を指定することで、各プルリクエストごとに一時的なURLが生成されます。
プレビューデプロイの利用例
| ブランチ名 | 対応デプロイURL | 補足 |
|---|---|---|
feature/login |
[https://login.vercel.app] |
プレビューデプロイの例 |
レビューワークフローへの統合
- Pull Request時に自動デプロイ：GitHub ActionsとVercelを連携させることで、プルリクエストが作成されたときにプレビューURLが生成されます。
- レビュー後の本番反映：レビュー承認後に
mainブランチにマージされると、自動で本番環境へデプロイされます。
要点まとめ
- プロジェクト初期設定時に
pages/や.env.localの存在を確認 - VercelアカウントはGitHub連携で登録しやすく、Team機能を活用すると管理が簡単
- GitHubリポジトリとVercelを連携させることで自動デプロイが可能
- 環境変数はSecretsとPublic variablesで分類して管理する
- カスタムドメイン設定時にはDNSレコードの登録に注意し、SSL証明書の自動取得も確認
- プレビューデプロイ機能を活用することで、チーム開発時のリスク削減と品質向上が図れる
以上により、Next.jsアプリは30分以内で本番環境へ公開可能です。