Next.jsをVercelでデプロイする手順と注意点

Next.jsアプリケーションをVercelにデプロイする際の重要ポイント

Next.jsアプリケーションをVercelにデプロイする際には、プロジェクト設定と環境変数管理がスムーズな導入に不可欠です。特にGitHubとの連携やビルド構成の最適化によって、自動化されたCI/CDパイプラインの実現が可能になります。以下では必要な前提条件と手順を具体的に解説します。

Vercelアカウントの作成とプロジェクト設定

Vercelへのデプロイはアカウント登録が必須であり、GitHubとの連携により自動化された環境構築が可能です。基本的な準備として、以下の手順を実施してください。

導入文:
Vercelの利用にはまずアカウント作成とリポジトリの紐付けが必要です。これらを正しく設定することで、CI/CDの自動化や環境変数管理が可能になります。

1. Vercelアカウントの登録
2. https://vercel.com/にアクセスし、メールアドレスとパスワードでアカウントを作成します。

3. 個人利用向けには無料プランが提供されています。

4. GitHubとの連携

5. VercelのDashboardで「Add New」→「Project」を選択し、GitHubリポジトリを紐付けます。

6. OAuth認証に従ってアカウントをリンクしてください。

7. プロジェクトの作成と確認

8. GitHubリポジトリが正しく認識され、Next.jsアプリケーションが自動検出されるかチェックします。

注意点: GitHub側でAPIトークンのスコープ（public_repoなど）を適切に設定し、セキュリティリスクを避けてください。

プロジェクト構成の確認事項

Next.jsアプリケーションをVercelにデプロイする際には、プロジェクトファイルやディレクトリ構造が正しく整備されていることが前提です。以下の点を確認してください。

導入文:
Next.jsプロジェクトはnext.config.jsやpages/ディレクトリなどの存在によって、Vercelで正しいビルドが実行されます。以下に必要なファイルとその役割をまとめます。

• next.config.js

• 生産環境向け設定（例: imagesドメイン指定、output: 'export'など）が必要な場合は記述してください。

• package.json

• next, react, react-domなどの依存関係が正しく管理されているか確認します。

GitHubリポジトリとVercelの連携手順

GitHubリポジトリをVercelに接続する際は、適切なブランチ選択とデプロイトリガーの設定が重要です。これにより、プッシュ時に自動でビルド・デプロイが可能になります。

導入文:
Vercelプロジェクト作成時におけるGitHubリポジトリの紐付け手順や、デプロイトリガーの設定方法を以下の通り解説します。

1. リポジトリ一覧から対象プロジェクトを選択

2. プロジェクト名や説明文の入力も可能です。

3. Next.jsが自動検出されるか確認

4. Vercelは.next/ディレクトリやpages/構造をもとにプロジェクトタイプを自動判定します。

5. 「Create Project」ボタンを押下

6. これでVercel側にプロジェクトが作成されます。

7. ブランチ設定とデプロイトリガーの指定

8. mainまたはdevelopなどのブランチを選択し、「Trigger Deployment on Push」オプションをONにして自動化します。

注意点: デプロイトリガーを無効にした場合、VercelのUIまたはCLIでBuildを実行する必要があります。

環境変数とシークレット管理の適切な設定方法

Next.jsアプリケーションではデプロイに必要なAPIキーなどの機密情報が多いため、環境変数やGitHub Actionsとの連携で適切に管理する必要があります。

導入文:
Vercelではプロジェクトレベルとリポジトリレベルで環境変数を設定可能ですが、セキュリティ上はGitHubシークレットで管理することが推奨されます。以下に具体的な手順を示します。

• Vercel Consoleでの環境変数登録

• プロジェクト設定画面（Settings → Environment Variables）で以下のように設定してください。

  • NEXT_PUBLIC_API_KEY: 公開される変数（Next.jsでprocess.env.NEXT_PUBLIC_API_KEYとしてアクセス可能）
  • DATABASE_URL: リポジトリ内でのみ利用される変数（process.env.DATABASE_URLとアクセス）

• GitHub Actionsとの連携

• .github/workflows/deploy.ymlに以下のように設定します。
  yaml
  jobs:
  deploy:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout code
  uses: actions/checkout@v3
  - name: Deploy to Vercel uses: vercel-actions/deploy@latest with: token: ${{ secrets.VERCEL_TOKEN }}

  1 2 3 4 5

  - name: Deploy to Vercel     uses: vercel-actions/deploy@latest     with:       token: ${{ secrets.VERCEL_TOKEN }}

注意点: VERCEL_TOKENはVercelのAPIトークンです。このトークンをGitHubシークレットに登録してください。

Build and Output Settingsのカスタマイズと最新機能利用

Next.jsアプリケーションでは、ビルドコマンドや出力先ディレクトリの設定が成功の鍵となります。また、Vercelのvercel.jsonファイルを活用することでより柔軟な構成が可能です。

導入文:
VercelでのBuild and Output SettingsはNext.jsのデプロイに重要な役割を果たします。最新機能としてvercel.jsonを使用してカスタム出力ディレクトリやビルドコマンドを設定できます。以下に具体的な手順を示します。

1. Build Command（ビルドコマンド）

2. デフォルトでnpm run buildが実行されますが、必要に応じてカスタムコマンドをvercel.jsonに記述してください。

3. Output Directory（出力先ディレクトリ）

4. next.config.jsやvercel.jsonで.next/以外のディレクトリを指定可能です。

5. Static Generationの有効化
   js
module.exports = {
output: 'export',
}

注意点: vercel.jsonファイルはVercelの最新機能であるため、導入することでより柔軟な設定が可能です。

CI/CDパイプラインの自動化と手動デプロイオプション

VercelではGitHub Actionsとの統合によりCI/CDパイプラインを自動化できますが、手動デプロイも柔軟に対応可能です。

導入文:
GitHub Actionsを使用することで、ローカルでの変更をプッシュするたびに自動でVercelへのデプロイが実行されます。以下のワークフロー例をご確認ください。

• 基本的なGitHub Actionsワークフロー
  yaml
name: Deploy to Vercel

on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Deploy
uses: vercel-actions/deploy@latest
with:
token: ${{ secrets.VERCEL_TOKEN }}


注意点: このワークフローでは、プッシュされたmainブランチのみをデプロイ対象とします。

デプロイ後の確認手順とトラブルシューティング

Vercelでデプロイした後は、ネットワークリクエストの検証やログ確認などを行うことで、アプリケーションの健全性を確保できます。

導入文:
デプロイ後のチェックでは、Vercelのログを確認し、静的ファイルの読み込み状況やNext.js特有の動作検証を行います。以下に具体的な方法を解説します。

• Build LogとProduction Logの確認

• Vercel Dashboard → プロジェクト選択 → 「Deployments」タブからエラーメッセージ（例: Cannot find module 'next'）を確認してください。

• URLの検証とパフォーマンスチェック

• Chrome DevToolsのNetworkタブで.next/static/ファイルが正しくロードされているか確認します。
• SSG（Static Site Generation）やuseRouter.push()などの動作をテストしてください。

注意点: パフォーマンスチェックで異常がない場合でも、Vercelのキャッシュ機能を再確認する必要があります。

Next.jsアプリケーションをVercelにデプロイする際の重要ポイントまとめ

• VercelアカウントとGitHub連携は自動デプロイの前提条件
• 環境変数はプロジェクトレベル・リポジトリレベルで管理することを推奨
• Build and Output Settingsを正しく設定することで、ビルド時間やパフォーマンスが向上
• GitHub Actionsと連携しCI/CDパイプラインを自動化する方法を習得
• デプロイ後のログ確認やURLテストで問題点を早期に発見

記事を参考に早速Next.jsアプリケーションのVercelデプロイを試してみましょう。