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

ブラウザに表示される Vercel の 500 エラーページ。Vercel Dashboard で環境変数を設定したのに、API が undefined を返し続ける。.env.local を何度も確認し、再デプロイを 2 回試し、ブラウザキャッシュまで消した——それでも直らない。

半時間後、原因は NEXT_PUBLIC_ というプレフィックスにあったとわかりました。

同じような経験はありませんか。Next.js プロジェクトはローカルでは問題なく動くのに、Vercel にデプロイすると不思議な不具合が出る。環境変数が効かない、カスタムドメインを設定しても 404 のまま、SSL 証明書のエラーで無限リダイレクトになる。

Vercel のデプロイフローは確かにシンプルですが、「簡単」と「罠に踏まない」は別物です。細部に潜む設定の落とし穴は、しばしば人を悩ませます。本記事では、Next.js を Vercel にデプロイする一連の流れを、基本のワンクリックデプロイから環境変数の正しい設定、カスタムドメインの紐付け、パフォーマンス監視まで案内します。ドキュメントに書かれていないが、必ず踏みがちな罠もすべて明示します。

基本デプロイ（5 分で公開）

ワンクリックデプロイの正しい手順

Vercel のデプロイは本当に簡単です。コードを GitHub に push し、Vercel と接続して、数クリック——完了。この「簡単」の裏には、意外と多くの細部があります。

まず基本フローから。Next.js プロジェクトは Git リポジトリ（GitHub、GitLab、Bitbucket いずれでも可）に push しておきます。次に vercel.com を開き、GitHub アカウントでログインして “Import Project” をクリックします。

Vercel はリポジトリを自動スキャンし、Next.js プロジェクトを検出すると、ビルドコマンドと出力ディレクトリを自動設定します。ほぼ触る必要はありません：

Build Command: next build
Output Directory: .next
Install Command: npm install

Deploy をクリックし、1〜2 分待てば your-project.vercel.app の URL が発行されます。この時点で、静的アセット（JS、CSS、画像）は Edge Network 上のグローバル CDN に載り、すぐに世界中へ配信されます。

初心者が見落としがちな点：package.json を確認すること。

build スクリプトが next build でない場合、または next、react、react-dom が依存にない場合、デプロイは即失敗します。build を webpack にしているのにデプロイできない、というケースもあります。Vercel が Next.js を認識できていないのです。

もう一つ、DPS ワークフロー——Develop、Preview、Ship。名前は大げさですが、中身はシンプルです：

• Develop：ローカル開発、npm run dev
• Preview：Pull Request を作成するか main 以外のブランチに push すると、Vercel がプレビュー URL を自動生成してテストできる
• Ship：main にマージすると、Vercel が本番環境へ自動デプロイ

この仕組みは非常に便利です。新機能を開発して PR を出すと、your-project-git-feature-branch.vercel.app のようなリンクが自動ででき、PM やテスターに共有できます。本番には一切影響しません。

デプロイ後の第一歩：ビルドログを確認

デプロイ成功を祝う前に、Vercel Dashboard でプロジェクトを開き、“Deployments” タブから最新のデプロイを開いてください。

詳細なビルドログが表示されます。ここでわかること：

1. 依存インストールにかかった時間：1 分超なら node_modules が大きいか、ネットワークが遅い可能性
2. ビルド中の警告：TypeScript の型エラー、ESLint の警告など
3. 生成された静的ページ数：どのページが SSG（Static Site Generation）、どれが SSR（Server-Side Rendering）か

初回デプロイ時、ビルドログに TypeScript エラーが大量に出てもデプロイが成功した、ということもあります。Vercel はデフォルトでは TypeScript エラーでデプロイを止めません——next.config.js で typescript.ignoreBuildErrors: false を有効にしない限りです。

見落とされがちな点：ビルド成功 ≠ ページが正常に動く。

デプロイは成功したのに 500 エラー、というケースもあります。API ルートで Node.js の fs を使ってローカルファイルを読んでいた、という原因です。Edge Functions はファイルシステムをサポートしません。Vercel の Serverless Functions はリクエストごとに隔離された環境で、ファイルの永続化は期待できません。

環境変数の設定（最もつまずきやすい）

環境変数の 3 つの層

ここが本題です。環境変数は初見ではかなり混乱します。私も初回はここで 30 分ほど止まりました。

Vercel は環境を 3 つに分けます：Production（本番）、Preview（プレビュー）、Development（開発）。ざっくり言うと：

• Production：ユーザーがアクセスする本番。main ブランチに対応
• Preview：PR を出したり main 以外に push したときのテスト環境
• Development：ローカルで npm run dev するときの環境

環境ごとに異なる変数を設定できます。例えば DB 接続文字列は、本番は本番 DB、プレビューはテスト DB、開発はローカル DB、といった使い分けです。

ローカル開発では？

プロジェクトルートに .env.local または .env.development を作成します：

# .env.local
DATABASE_URL=postgresql://localhost:5432/mydb
API_KEY=your-api-key-here

.env.local は Git から除外されます（.gitignore に追加）。API key がリポジトリに漏れません。

Vercel では？

Vercel Dashboard → プロジェクト → Settings → Environment Variables。

Production、Preview、Development の 3 つのチェックボックスがあります。チェックした環境でのみ変数が有効になります。

KiloClaw - 企業向けマネージド OpenClaw、AI エージェントのオーケストレーションとスマートルーティングを加速

今すぐ始める →広告

例：DB 接続文字列を本番だけで使う場合：

Name: DATABASE_URL
Value: postgresql://prod-server:5432/prod-db
Environment: ✅ Production

保存後、再デプロイすれば反映されます。

よくある罠：設定したのに再デプロイしていない。

Vercel は環境変数を変えても自動では再デプロイしません。手動でデプロイをトリガーするか、コードを push しないと実行環境に反映されません。

クライアント vs サーバー変数

最もハマりやすい部分です。私が深夜 3 時に踏んだのもここです。

Next.js の環境変数は 2 種類あります：

1. サーバー変数：サーバー側コード（API ルート、getServerSideProps、getStaticProps）でのみ参照可能
2. クライアント変数：NEXT_PUBLIC_ プレフィックスが必要。ブラウザの JS にインラインされる

例：

# サーバー変数（安全）
DATABASE_URL=postgresql://...
API_SECRET_KEY=abc123

# クライアント変数（露出する）
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_SITE_NAME=My Site

DATABASE_URL と API_SECRET_KEY はサーバーでのみ使え、ブラウザからは取得できません。一方 NEXT_PUBLIC_API_BASE_URL は JS に直接埋め込まれ、DevTools を開けば誰でも見られます。

私が踏んだ罠：

クライアントから第三者 API を呼ぶために API key が必要でした。最初は NEXT_PUBLIC_ を付けず、ブラウザではずっと undefined でした。

プレフィックスを付けたら動きました——しかし key はブラウザのコードに丸見えです。DevTools で NEXT_PUBLIC_ を検索すれば、誰でも読めます。

正しいやり方は？

クライアントから直接第三者 API を呼ばない。Next.js の API ルートに寄せます：

// app/api/data/route.ts (サーバー)
export async function GET() {
  const res = await fetch('https://api.example.com', {
    headers: {
      'Authorization': `Bearer ${process.env.API_SECRET_KEY}` // 安全
    }
  })
  return res.json()
}

// app/page.tsx (クライアント)
const data = await fetch('/api/data') // 自前 API を呼び、key を露出しない

こうすれば API key はサーバーだけで使われ、ブラウザには漏れません。

もう一つの細部：NEXT_PUBLIC_ 変数はビルド時にインラインされます。実行時ではありません。変数を変えたら、必ず再 build が必要です。

環境変数の同期テクニック

チーム開発では環境変数が面倒です。.env.local を Git に載せられない一方、新メンバーは何を設定すればいいかわからない。

Vercel には次のコマンドがあります：

vercel env pull .env.local

Vercel 上の環境変数（Development タイプ）をローカルの .env.local に落とせます。

前提として Vercel CLI を入れます：

npm i -g vercel
vercel link  # プロジェクトを関連付け
vercel env pull

ただし、このコマンドが取得するのは Development 環境だけです。Production と Preview はセキュリティ上取得されません。

別のテクニック：.env.example をテンプレートにする。

ルートに .env.example を置き、必要な変数名だけ列挙します（値は書かない）：

# .env.example
DATABASE_URL=
API_KEY=
NEXT_PUBLIC_API_BASE_URL=

これを Git にコミット。新メンバーはコピーして .env.local を作り、各自の値を入れればよいです。

Vercel の環境変数の合計サイズ上限は 64KB、Edge Function の単一変数は 5KB です。一般的なプロジェクトでは超えませんが、JWT 公開鍵や base64 画像などを入れると上限に当たることがあります。

カスタムドメインの設定

ドメイン紐付けの 3 ステップ

your-project.vercel.app のような URL はプロ感が薄く、* .vercel.app は国内ではブロックされることもあります。国内ユーザーに安定して見てもらうなら、独自ドメインの紐付けは必須です。

ステップ 1：Vercel にドメインを追加

Vercel Dashboard → プロジェクト → Settings → Domains。

“Add” をクリックし、ドメイン（例：example.com や blog.example.com）を入力して Add。

Vercel がドメインを検出し、必要な DNS レコードを案内します。

ステップ 2：DNS を設定

A レコードと CNAME レコードの 2 通りがあります。

ルートドメイン（example.com）を紐付ける場合：

Type: A
Name: @
Value: 76.76.21.21

サブドメイン（blog.example.com）を紐付ける場合：

Type: CNAME
Name: blog
Value: cname.vercel-dns.com

国内ユーザー向けの設定：

ユーザーが主に国内なら、cname.vercel-dns.com の代わりに cname-china.vercel-dns.com を使うのがおすすめです。中国本土向けに最適化された CNAME です。

Type: CNAME
Name: blog
Value: cname-china.vercel-dns.com

または国内向け IP への A レコード：

Type: A
Name: @
Value: 76.223.126.88 または 76.76.21.98

DNS を設定したら、数分〜数十分待ちます（DNS プロバイダ次第）。Vercel が設定の反映を自動検出します。

ステップ 3：検証

Vercel Dashboard を更新します。ドメイン横に緑の “Valid Configuration” が出れば成功です。

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

15%割引を入手 →広告

ブラウザでドメインにアクセスし、Next.js プロジェクトが表示されることを確認してください。

よくある罠：DNS の設定ミス。

CNAME の Name に blog.example.com とフルドメインを書いてしまい、blog だけにすべきだった、という失敗があります。DNS が解決せず、ずっと有効にならないこともあります。

A レコードの IP 誤り、DNS キャッシュ未更新で 30 分待っても 404、といったケースもあります。

SSL 証明書の自動設定

良いニュースは、Vercel が SSL 証明書（Let’s Encrypt）を自動申請してくれることです。追加設定なしで HTTPS が使えます。

ドメイン設定が反映されると、数分で証明書申請が始まります。Domains ページでは “Certificate Status: Provisioning” と表示され、しばらくすると “Active” になります。

証明書が有効になれば、https://example.com にアクセスすると鍵マークが表示されます。

罠：証明書不一致による無限リダイレクト。

ルート（example.com）と www（www.example.com）の両方を設定していると、Vercel はどちらかへリダイレクトします。

DNS や SSL の片方だけが正しくないと、無限リダイレクトになります——http://example.com と https://www.example.com の間を行き来し続ける、というパターンです。

対処：Vercel に example.com と www.example.com の両方を追加し、DNS も両方正しく設定する。

一部 DNS プロバイダでは SSL/TLS を「完全（フル）暗号化」にする必要があります。「柔軟」モードだと証明書不一致になることがあります。

SSL が有効か確認するには？

ブラウザで https://example.com を開き、鍵アイコンから証明書詳細を確認。“Issued by: Let’s Encrypt” なら成功です。

コマンドでも確認できます：

curl -I https://example.com

HTTP ステータスが 200 か、Strict-Transport-Security ヘッダ（HSTS）があるかを見ます。

サブドメインと複数ドメイン戦略

www とルートドメインの両方

example.com と www.example.com を両方設定し、一方へリダイレクトする運用が多いです。

Vercel では Domains に両方追加すればリダイレクトを処理できます。Settings で “Primary Domain” を選べば、もう一方は自動で主ドメインへ転送されます。

多言語サイトのドメイン戦略

Next.js で i18n 対応しているなら、言語ごとにサブドメインを割り当てられます：

• en.example.com → 英語版
• zh.example.com → 中国語版
• ja.example.com → 日本語版

Vercel の Settings → Domains で各サブドメインを追加し、next.config.js で i18n を設定します：

module.exports = {
  i18n: {
    locales: ['en', 'zh', 'ja'],
    defaultLocale: 'en',
    domains: [
      { domain: 'en.example.com', defaultLocale: 'en' },
      { domain: 'zh.example.com', defaultLocale: 'zh' },
      { domain: 'ja.example.com', defaultLocale: 'ja' },
    ],
  },
}

プレビューブランチに独立ドメイン

staging ブランチ用に staging.example.com を Domains に追加し、“Git Branch” を staging に指定できます。

staging へ push するたびに staging.example.com へデプロイされ、本番には影響しません。

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

Vercel Analytics と Speed Insights

公開後、ページは速いか、UX はどうか、ボトルネックはどこか——知りたくなるはずです。

Vercel は 2 つの無料分析ツールを提供します：Analytics（行動分析）と Speed Insights（パフォーマンス分析）。

Speed Insights をすぐ入れる

Next.js App Router（Next.js 13+）なら、接続はとても簡単です：

npm install @vercel/speed-insights

ルートレイアウトに 1 行追加：

// app/layout.tsx
import { SpeedInsights } from '@vercel/speed-insights/next'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  )
}

デプロイ後、Vercel Dashboard の “Speed Insights” タブでデータ収集が始まります。

Core Web Vitals の監視

Speed Insights は Google が定義する 3 つの主要指標を自動追跡します：

1. FCP (First Contentful Paint)：初回コンテンツ描画。理想値 < 1.8s
2. LCP (Largest Contentful Paint)：最大コンテンツ描画。理想値 < 2.5s
3. CLS (Cumulative Layout Shift)：レイアウト安定性。理想値 < 0.1

データは実ユーザーのブラウザ（Real User Monitoring）から取得されます。ラボ計測ではなく、地域・デバイス・ブラウザ別の実態が見えます。

Speed Insights でどう最適化するか

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

今すぐ始める →広告

例として、あるプロジェクトで LCP が常に 4s 前後、理想の 2.5s を大きく超えていました。

詳細を見ると、トップの Hero 画像が原因——2MB の PNG、圧縮なし、Next.js の <Image> も未使用。

WebP に変換し next/image で配信すると、LCP は 1.8s まで下がり、スコアは 60 点から 95 点になりました。

実ユーザーデータの価値はここにあります。ラボで満点でも、現場の体感とはズレることがあります。

Analytics で行動を見る

Vercel Analytics では次がわかります：

• アクセスの多いページ
• 流入元（トラフィックソース）
• 地域別のアクセス分布
• 離脱率の高いページ

個人プロジェクトでは無料（月 10 万ビューまで）。商用は有料です。

応用設定

カスタムビルドコマンド

ビルドフローが特殊なら、Vercel Dashboard → Settings → Build & Development Settings でカスタマイズできます。

pnpm を使う例：

Build Command: pnpm build
Install Command: pnpm install

ビルド前にスクリプトを走らせる例：

Build Command: npm run prebuild && npm run build

Edge Functions と Edge Middleware

Vercel はグローバルエッジでコードを実行できます（Edge Functions）。従来の Serverless Functions より応答が速い場合があります。

Next.js で Middleware を使っていると、Vercel は自動で Edge Middleware としてデプロイします。認証、リダイレクト、A/B テストなどをエッジで完結でき、オリジンに戻る必要がありません。

// middleware.ts
import { NextResponse } from 'next/server'

export function middleware(request) {
  if (!request.cookies.get('token')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

Serverless Functions のタイムアウト

Vercel の Serverless Functions のデフォルトタイムアウトは 10 秒（無料プラン）。第三者 API 呼び出しや PDF 生成など重い処理だとタイムアウトしがちです。

有料プランでは最大 60 秒まで延長できます。または Inngest、Trigger.dev などのキューに逃がし、HTTP をブロックしない設計も有効です。

デプロイ保護：プレビュー環境のパスワード

プレビュー（Preview）を公開したくないなら、Settings → Deployment Protection でパスワード保護を有効にできます。

“Password Protection for Previews” にチェックしてパスワードを設定すると、プレビュー URL アクセス時に入力が求められます。

未完成機能や機密データの保護に向いています。

まとめ

ここまでで、Next.js を Vercel にデプロイする一連の流れが整理できたはずです。

ワンクリックデプロイから、環境変数の 3 層、カスタムドメインと SSL、パフォーマンス監視と応用設定まで——実務で必ず出会うテーマです。

環境変数は複雑ですが、原則はシンプルです。サーバー変数はプレフィックスなし、クライアント変数は NEXT_PUBLIC_、API key はクライアントに絶対出さない。この罠は、私が先に踏んであります。

ドメイン設定も見た目は簡単ですが、DNS の細部で失敗しがちです。国内ユーザー向けには cname-china.vercel-dns.com や 76.76.21.21 など国内向けアドレスを使い、ブロックを避けてください。

パフォーマンス監視では Speed Insights が特に有用です。実ユーザーデータはラボ計測より信頼できます。LCP が 2.5 秒を超えたら、画像・フォント・ファーストビューを疑う——一つの修正でスコアが 30 点上がることも珍しくありません。

ここまで読んだなら、次はターミナルを開いて最初のプロジェクトを GitHub に push し、Vercel と接続して自動デプロイが完了する瞬間を体験してみてください。その達成感は、この 10 分の読了に見合うものです。

問題があればコメントで共有してください。できる限り返信します。デプロイ、うまくいきますように。