Vercelデプロイ完全ガイド｜Next.jsプロジェクトの本番公開手順

「Next.jsプロジェクトを本番環境に公開したいけど、インフラの構築が大変そう」「サーバーの管理に手間をかけたくない」——こうした悩みを持つ開発者にとって、Vercelは最適なデプロイプラットフォームです。

Vercelは、Next.jsの開発元であるVercel社が提供するクラウドプラットフォームで、Next.jsとの親和性が圧倒的に高いです。GitHubと連携するだけで、プッシュのたびに自動デプロイが実行され、プルリクエストごとにプレビューURLが生成されます。

本記事では、Next.jsプロジェクトをVercelにデプロイする手順から、本番運用に必要な各種設定まで、実践的に解説します。

Vercelとは？特徴と料金体系

Vercelは、フロントエンドアプリケーションのホスティングに特化したクラウドプラットフォームです。Next.jsだけでなく、Astro、Nuxt、Svelte Kitなど主要なフレームワークにも対応していますが、Next.jsとの統合が最も深いのが特徴です。

Vercelの主な特徴

ゼロコンフィグデプロイ
Next.jsプロジェクトであれば、ほぼ設定なしでデプロイできます。ビルドコマンドや出力ディレクトリは自動検出されます。

グローバルエッジネットワーク
世界中のエッジサーバーからコンテンツを配信します。日本のユーザーには東京リージョンから配信されるため、レスポンスが高速です。

サーバーレスファンクション
Next.jsのAPI RoutesやServer Componentsは、自動的にサーバーレスファンクションとしてデプロイされます。インフラの管理は不要です。

プレビューデプロイ
すべてのGitブランチやプルリクエストに対して、個別のプレビューURLが自動生成されます。本番反映前の動作確認が容易です。

インスタントロールバック
問題が発生した場合、ワンクリックで前のバージョンにロールバックできます。

料金プランの比較

Hobbyプラン（無料）
個人プロジェクトやプロトタイプに適しています。商用利用は不可。帯域幅100GB/月、サーバーレスファンクション実行時間100GB-Hours/月。

Proプラン（月額20ドル/メンバー）
商用利用可能。帯域幅1TB/月、サーバーレスファンクション実行時間1,000GB-Hours/月。チーム機能やパフォーマンス分析機能が利用できます。

Enterpriseプラン（要見積もり）
大規模チームやSLA要件のあるプロジェクト向け。専用サポート、高度なセキュリティ機能、カスタムインテグレーションが含まれます。

中小企業のコーポレートサイトやブログであれば、Proプランで十分な場合がほとんどです。

デプロイの初期設定手順

Next.jsプロジェクトをVercelにデプロイする手順を、ステップバイステップで解説します。

Step 1：Vercelアカウントの作成とGitHub連携

1. Vercelの公式サイトにアクセスし、「Sign Up」をクリックします。
2. 「Continue with GitHub」を選択してGitHubアカウントでサインアップします。
3. GitHubのリポジトリへのアクセス権限を許可します（すべてのリポジトリまたは特定のリポジトリを選択可能）。

Step 2：プロジェクトのインポート

1. Vercelダッシュボードで「Add New... → Project」をクリックします。
2. GitHubリポジトリの一覧から、デプロイしたいリポジトリを選択して「Import」をクリックします。
3. プロジェクト設定画面が表示されます。Next.jsプロジェクトの場合、以下の設定は自動検出されます。

Framework Preset: Next.js
Build Command: next build（自動検出）
Output Directory: .next（自動検出）
Install Command: npm install（自動検出）

4. 環境変数を設定します（CMSのAPIキーなど、後述）。
5. 「Deploy」をクリックすると、ビルドとデプロイが開始されます。

初回デプロイが完了すると、your-project.vercel.appというURLでサイトにアクセスできるようになります。

Step 3：vercel.jsonの設定（必要に応じて）

多くの場合、デフォルト設定で問題ありませんが、リダイレクトやヘッダーのカスタマイズが必要な場合はvercel.jsonで設定します。

// vercel.json
{
  "redirects": [
    {
      "source": "/old-page",
      "destination": "/new-page",
      "permanent": true
    },
    {
      "source": "/blog/:slug(\\d+)",
      "destination": "/blog/post-:slug",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        }
      ]
    },
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

ただし、Next.jsのnext.config.jsでもリダイレクトやヘッダーを設定できます。Next.jsの設定を優先し、vercel.jsonはNext.jsの設定ではカバーできない部分に使うのがおすすめです。

環境変数の管理

APIキーやデータベース接続文字列などの秘密情報は、環境変数として管理します。Vercelでは、環境変数を安全に管理するための機能が充実しています。

環境変数の設定方法

ダッシュボードからの設定
Project Settings → Environment Variables で設定します。

各環境変数には、適用するEnvironment（環境）を指定できます。

・Production：本番デプロイに適用
・Preview：プレビューデプロイに適用
・Development：vercel devコマンドでのローカル開発に適用

# よくある環境変数の例
NEXT_PUBLIC_SITE_URL=https://example.com
MICROCMS_API_KEY=xxxxxxxxxxxxxxxxx
MICROCMS_SERVICE_DOMAIN=your-service
DATABASE_URL=postgresql://user:pass@host:5432/db
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=https://example.com

「NEXT_PUBLIC_」プレフィックスが付いた環境変数は、クライアントサイドのJavaScriptにバンドルされます。APIキーなどの秘密情報には絶対にこのプレフィックスを付けないでください。

Vercel CLIでの環境変数管理

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

# 環境変数の一覧表示
vercel env ls

# 環境変数の追加
vercel env add MICROCMS_API_KEY production

# ローカル開発用に環境変数を.envファイルに展開
vercel env pull .env.local

vercel env pullコマンドを使うと、Vercelに設定した環境変数をローカルの.env.localファイルにダウンロードできます。チーム開発で環境変数の共有に便利です。

カスタムドメインの設定

独自ドメインでサイトを公開する手順を解説します。

ドメインの追加

1. Project Settings → Domains を開きます。
2. ドメイン名（例：example.com）を入力して「Add」をクリックします。
3. Vercelが推奨するDNS設定が表示されます。

# Aレコード（ルートドメインの場合）
Type: A
Name: @
Value: 76.76.21.21

# CNAMEレコード（サブドメインの場合）
Type: CNAME
Name: www
Value: cname.vercel-dns.com

4. ドメインレジストラ（お名前.com、Cloudflareなど）のDNS設定で、上記のレコードを追加します。
5. DNS設定が反映されると、SSL証明書が自動的に発行されます（Let's Encrypt）。

wwwリダイレクトの設定

www付きとwwwなしの両方のドメインを追加し、片方をリダイレクト先として設定します。

例えば、example.comをプライマリドメインとし、www.example.comからexample.comへ301リダイレクトする設定がVercelのダッシュボードから簡単に行えます。

プレビューデプロイの活用

プレビューデプロイは、Vercelの最も強力な機能の一つです。チーム開発のワークフローを大幅に改善します。

プレビューデプロイの仕組み

mainブランチ以外へのプッシュやプルリクエストの作成時に、自動的にプレビュー環境がデプロイされます。各プレビューデプロイには一意のURLが割り当てられます。

# プレビューURLの例
https://my-project-abc123-team-name.vercel.app
https://my-project-git-feature-branch-team-name.vercel.app

プルリクエストには、Vercel botがデプロイステータスとプレビューURLを自動コメントします。レビュアーはURLをクリックするだけで、変更後の動作を確認できます。

プレビューデプロイの実践的な活用例

デザインレビュー
デザイナーにプレビューURLを共有して、実環境でのデザイン確認を行います。ローカル環境のセットアップが不要なので、非エンジニアでも確認できます。

コンテンツプレビュー
ヘッドレスCMSの下書きコンテンツを、プレビュー環境で確認できます。Next.jsのDraft Modeと組み合わせると、未公開コンテンツのプレビューが可能になります。

// app/api/draft/route.ts - ドラフトモードの有効化
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const slug = searchParams.get('slug');

  // シークレットキーの検証
  if (secret !== process.env.DRAFT_SECRET) {
    return new Response('Invalid secret', { status: 401 });
  }

  (await draftMode()).enable();
  redirect(`/blog/${slug}`);
}

E2Eテストの実行
プレビューデプロイのURLに対してPlaywrightやCypressのE2Eテストを実行し、デプロイ前の品質を担保します。

パフォーマンスの監視と最適化

Vercelには、サイトのパフォーマンスを監視するためのツールが組み込まれています。

Vercel Analytics

Vercel Analyticsは、実際のユーザーデータに基づくパフォーマンス計測（RUM：Real User Monitoring）を提供します。

// Next.jsでのVercel Analytics設定
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Core Web Vitals（LCP、INP、CLS）のスコアをリアルユーザーのデータで計測し、ページごとのパフォーマンスを可視化できます。

ビルドの最適化

ビルド時間の短縮やバンドルサイズの最適化も重要です。

// next.config.js でのビルド最適化
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 画像の最適化
  images: {
    formats: ['image/avif', 'image/webp'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.microcms-assets.io',
      },
    ],
  },
  // バンドル分析（開発時のみ）
  ...(process.env.ANALYZE === 'true' && {
    experimental: {
      bundlePagesExternals: true,
    },
  }),
};

module.exports = nextConfig;

Vercelのダッシュボードでは、各デプロイのビルドログやバンドルサイズの推移も確認できます。

トラブルシューティングとベストプラクティス

Vercelでのデプロイで遭遇しやすい問題と対処法を紹介します。

よくあるデプロイエラーと対処法

ビルドエラー：型エラーやLintエラー
VercelはデフォルトでTypeScriptの型チェックとESLintを実行します。ローカルでは発生しないエラーが、本番ビルドで発生することがあります。

# ローカルで本番ビルドを再現
npm run build

# 型チェックのみ実行
npx tsc --noEmit

環境変数の未設定
ビルド時に必要な環境変数が設定されていないと、ビルドエラーやランタイムエラーが発生します。環境変数の設定漏れがないか確認しましょう。

ファンクションのタイムアウト
サーバーレスファンクションにはタイムアウト制限があります（Hobbyプラン：10秒、Proプラン：60秒）。外部APIの呼び出しに時間がかかる場合、タイムアウトエラーが発生します。

// サーバーレスファンクションのタイムアウト設定
// vercel.json
{
  "functions": {
    "app/api/heavy-task/route.ts": {
      "maxDuration": 60
    }
  }
}

本番運用のベストプラクティス

・ブランチ保護：mainブランチへの直接プッシュを禁止し、必ずプルリクエスト経由でマージする
・プレビューデプロイの確認：マージ前に必ずプレビューURLで動作確認する
・環境変数の分離：Production/Preview/Developmentで異なる値を設定し、本番データへのアクセスを制限する
・ロールバック手順の確認：問題発生時に迅速にロールバックできるよう、手順をチームで共有しておく
・モニタリングの設定：Vercel AnalyticsとSpeedInsightsを有効にし、パフォーマンスの変動を監視する

まとめ

VercelはNext.jsプロジェクトのデプロイを劇的に簡素化し、開発チームが本来の開発作業に集中できる環境を提供します。

本記事で解説した主要なポイントを振り返ります。

・GitHubリポジトリの連携だけでゼロコンフィグデプロイが可能
・環境変数はProduction/Preview/Developmentで分離管理する
・カスタムドメインの設定とSSL証明書の自動発行
・プレビューデプロイを活用したチーム開発ワークフロー
・Vercel AnalyticsとSpeedInsightsでパフォーマンスを継続監視
・vercel.jsonやnext.config.jsでリダイレクト・ヘッダー・キャッシュを制御

まずはHobbyプランで個人プロジェクトをデプロイしてみて、操作感を把握するのがおすすめです。チーム開発で活用する場合はProプランに移行し、プレビューデプロイやチーム機能をフルに活用しましょう。