Next.js Vercel デプロイ完全ガイド：環境変数、ドメイン設定、パフォーマンス監視まで

深夜3時、私はブラウザに表示された Vercel の 500 エラー画面を見つめていました。
「ローカル環境では完璧に動いていたのに……」。
設定画面で環境変数を何度も確認し、キャッシュをクリアし、再デプロイを繰り返しましたが、API は頑なに undefined を返し続けました。

解決したのは夜明け頃。原因は環境変数の名前に NEXT_PUBLIC_ というプレフィックスを付け忘れていたことでした。
その瞬間、自分の顔を平手打ちしたい気分になりました。

Vercel は「Git Push するだけでデプロイ完了」という魔法のような体験を提供してくれます。しかし、その手軽さの裏には、環境変数のスコープ、エッジネットワーク特有の制約、ドメイン設定の落とし穴など、知っておかないとハマるポイントがいくつも潜んでいます。

Vultr - 高性能NVMeクラウドサーバー、世界32拠点、Dockerワンクリック展開対応

価格を見る →広告

この記事では、Vercel へのデプロイフローを基礎から応用まで徹底解説します。私が深夜に踏み抜いたような地雷を避け、あなたの Next.js アプリを最短で世界中に公開するためのロードマップです。

Vercel デプロイの基礎：5分で世界へ

1. プロジェクトのインポート

まだ Vercel アカウントを持っていない場合は作成し（GitHub アカウントでログインするのが一番スムーズです）、ダッシュボードの “Add New…” → “Project” をクリックします。

GitHub のリポジトリ一覧が表示されるので、デプロイしたい Next.js プロジェクトの “Import” ボタンを押します。

2. フレームワーク設定とビルドコマンド

Vercel は賢いので、package.json をスキャンして「これは Next.js プロジェクトだね」と自動認識します。
通常、Build Command (next build) や Output Directory (.next) などの設定はデフォルトのままでOKです。

もしモノレポ（Monorepo）構成の場合は、Root Directory を適切に指定してください。

3. デプロイ実行

“Deploy” ボタンを押すと、ビルドが始まります。
ログが流れ始め、1〜2分後には……おめでとうございます！ 花吹雪のアニメーションと共に、あなたのサイトが公開されます。
発行された https://project-name.vercel.app のような URL にアクセスすれば、世界中のどこからでも見ることができます。

【重要】環境変数の落とし穴

Vercel デプロイで最もトラブルが多いのがここです。

Alibaba Cloud - 開発者向けクラウドの第一候補、ライトサーバー15%OFF、プロジェクトの迅速な立ち上げを支援

15%割引を入手 →広告

設定画面での入力

ダッシュボードの “Settings” → “Environment Variables” で変数を追加します。
ここで注意すべきは Environment（対象環境） のチェックボックスです。

• Production: 本番環境（main ブランチのデプロイ）
• Preview: プレビュー環境（Pull Request 時のデプロイ）
• Development: vercel env pull コマンドでローカルに落としてくる設定

基本は全部チェックで良いですが、例えば「本番とテストでデータベースを分けたい」場合は、値を変えて別々に登録します。

NEXT_PUBLIC_ の罠

Next.js の仕様として、ブラウザ（クライアントサイド）の JavaScript から環境変数を参照したい場合、変数名は必ず NEXT_PUBLIC_ で始まる必要があります。

• DATABASE_URL: サーバーサイドのみで使用（API Routes, getServerSideProps など）。秘密のパスワードを含むため、ブラウザに露出してはいけません。
• NEXT_PUBLIC_API_ENDPOINT: コンポーネント内で fetch() する際など、ブラウザ側で使用。

私がハマったように、ブラウザで使う変数に NEXT_PUBLIC_ を付け忘れると、コード内では process.env.MY_VAR が undefined になり、原因不明のエラーに悩まされることになります。逆に、API キーなどの秘密情報を NEXT_PUBLIC_ にしてしまうと、世界中に秘密鍵を公開することになるので絶対にやめましょう。

カスタムドメインと HTTPS

vercel.app ドメインのままでも動きますが、本格的なサービスなら独自ドメインは必須です。

Railway - モダンなデプロイプラットフォーム、煩わしい運用から解放、数分で公開

今すぐ始める →広告

1. “Settings” → “Domains” を開く。
2. 取得したドメイン（例: myapp.com）を入力して Add。
3. 表示される DNS レコード情報を、ドメイン管理会社（お名前.com, GoDaddy, Cloudflare など）の管理画面に入力します。
   • Aレコード: 76.76.21.21 (ルートドメインの場合)
   • CNAMEレコード: cname.vercel-dns.com (サブドメイン www などの場合)

DNS が浸透すると、Vercel が自動的に Let’s Encrypt で SSL 証明書を発行してくれます。更新も自動です。素晴らしいですね。

プレビュー環境（Dienvironment）の魔力

Vercel の最強機能の一つが「プレビュー環境」です。

GitHub で新しいブランチを切り、何かしら変更して Pull Request (PR) を作成してみてください。
Vercel bot が即座に反応し、その PR のコードだけでビルドされた個別の URL をコメントしてくれます。

製品版（Production）には一切影響を与えず、チームメンバーやクライアントに「今の修正、こんな感じになりました」と実際の動く画面を共有できます。
レビュー完了して merge ボタンを押せば、自動的に本番環境へデプロイ（Promotion）されます。この開発体験の良さは、一度味わうと戻れません。

パフォーマンス監視：Analytics と Speed Insights

サイトが重いか軽いか、推測する必要はありません。

Speed Insights

“Speed Insights” タブを有効にすると、実際のユーザー（Real User Monitoring）の Web Vitals スコアが見れます。
Lighthouse などのラボデータとは違い、「iPhone でアクセスしているユーザーの LCP が遅い」といったリアルな問題が見えてきます。
Next.js アプリなら、@vercel/speed-insights パッケージを入れるだけで、コード変更なしに計測が始まります。

Vercel Analytics

こちらは Google Analytics のようなアクセス解析ツールですが、よりプライバシーに配慮されており、クッキー同意バナーが不要（GDPR準拠）な場合が多いです。
PV数や訪問者数だけでなく、「どのページで離脱したか」などの分析が可能です。

まとめ

Vercel へのデプロイは簡単ですが、プロダクションレベルの運用にはいくつかのポイントを押さえる必要があります。

1. 環境変数のスコープを正しく理解する（NEXT_PUBLIC_）。
2. カスタムドメインを設定してブランディングを確立する。
3. プレビュー環境を活用して、安全かつ高速に開発サイクルを回す。
4. モニタリング機能で継続的にパフォーマンスを改善する。

インフラ管理の煩わしさから解放され、開発そのものに集中できる環境。それが Vercel を選ぶ最大の理由です。

4 min read · 公開日: 2025年12月20日 · 更新日: 2026年1月22日

Easton

技術開発