こんにちは、かつコーチです。
前回はVitestとPlaywrightを使って、Next.jsアプリにテストを導入する方法を解説しました。
認証もテストも整ったので、今回はいよいよアプリを実際に世界へ公開するステップに進みます。
使うのはVercelというホスティングサービスです。
Vercelとは？前提知識
Next.jsを開発している会社が提供するホスティングサービス
Vercelは、Next.jsを開発している会社自身が提供するホスティングサービスです。
そのため、Next.jsの機能（Server Components、Route Handlers、middlewareなど）がそのまま動くように、インフラ側が最適化されています。
他のホスティングサービスでもNext.jsは動きますが、追加設定なしで一番スムーズに動くのがVercelという位置づけです。
ゼロコンフィグデプロイという考え方
Vercelの大きな特徴がゼロコンフィグデプロイ（複雑な設定ファイルを書かなくても、リポジトリを連携するだけで自動的に最適な設定でデプロイされる仕組み）です。
GitHubリポジトリと連携するだけで、ビルドコマンドや出力ディレクトリの指定なしにデプロイが完了します。
基本の書き方・実装手順
手順1：GitHubリポジトリの準備
まずNext.jsプロジェクトをGitHubにpushしておきます。
git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-name/your-repo.git
git push -u origin main
手順2：VercelアカウントとGitHubの連携
Vercelの公式サイトでアカウントを作成し、GitHubアカウントと連携します。
連携が終わると、Vercelのダッシュボードに自分のGitHubリポジトリ一覧が表示されるようになります。
手順3：プロジェクトのインポートとデプロイ
「Add New Project」からデプロイしたいリポジトリを選択し、「Deploy」ボタンを押すだけでビルドが始まります。
Framework Preset: Next.js（自動検出される）
Build Command: next build（自動設定）
Output Directory: .next（自動設定）
Next.jsプロジェクトだと自動検出されるため、ビルドコマンドや出力ディレクトリを手動で設定する必要はほぼありません。
数分待つとデプロイが完了し、https://your-repo.vercel.appのようなURLが発行されます。
手順4：環境変数の設定
前々回実装したAuth.jsのAUTH_SECRETのような機密情報は、コードに直接書かずVercelの管理画面から設定します。
Vercelダッシュボード
→ プロジェクトを選択
→ Settings
→ Environment Variables
ここでキーと値を入力し、適用先の環境（Production / Preview / Development）を選んで保存します。
保存後は再デプロイしないと反映されない点に注意してください。
# .env.localはローカル開発専用
# 本番用の値はVercelダッシュボードに個別で登録する
AUTH_SECRET=ローカル用のダミー値
AUTH_GITHUB_ID=ローカル用のダミー値
手順5：自動デプロイの仕組み（CI/CD）
一度連携が完了すると、mainブランチにpushするたびに自動でビルド・デプロイが走るようになります。
プルリクエストを作成すると、そのブランチ専用のプレビュー環境（本番とは別のURLで動く確認用の環境）も自動で発行されます。
レビュー時に実際に動くURLを共有できるのは、Vercelの大きな利点の1つです。
つまずきやすい設定・注意点
環境変数のスコープ（Production / Preview / Development）は用途に応じて分けておくのがおすすめです。
たとえばOAuthのコールバックURLはPreview環境ごとにドメインが変わるため、Preview用のAuth設定を別途用意しておくとスムーズです。
よくあるつまずきポイント・エラー対処
実際にハマった環境変数未設定によるビルド失敗
私が実際につまずいた経験を1つ共有します。
ローカルでは問題なく動いていたのに、Vercelへの初回デプロイでビルドが失敗しました。
Error: Missing AUTH_SECRET environment variable
❌ Before：ローカルの.env.localだけ設定して満足していた
# .env.local（ローカルのみ）
AUTH_SECRET=xxxxx
.env.localはGitの管理対象から外れる（.gitignoreに含まれる）ため、Vercel側には一切この値が渡っていませんでした。
ローカルで動くことと本番で動くことは別問題だと、身をもって実感した瞬間です。
✅ After：Vercelダッシュボードにも同じキーを登録する
Settings → Environment Variables に以下を追加
AUTH_SECRET=xxxxx（本番用に別途生成した値を推奨）
登録後に「Redeploy」を実行すると、ビルドが正常に通るようになりました。
.env.localはあくまでローカル専用ファイルであり、本番用の値は必ずVercelの管理画面から個別に設定する、という運用を徹底するようになりました。
まとめ
この記事のポイント
- VercelはNext.js開発元が提供するホスティングサービスで、Next.jsの機能を追加設定なしで動かせる
- GitHubリポジトリと連携するだけで、ビルド設定不要のゼロコンフィグデプロイができる
- 機密情報を含む環境変数は、コードに書かずVercelダッシュボードのEnvironment Variablesから設定する
mainブランチへのpushで自動デプロイ、プルリクエストごとにプレビュー環境が発行される仕組み（CI/CD）が標準で備わっている.env.localはローカル専用なので、本番用の値は別途Vercel側に登録する必要がある
次に読むべき記事
アプリを公開できるようになったら、次はユーザー体験に直結する画像の最適化です。
次回は、next/imageを使って画像を自動で最適化する方法を解説します。
→ 次の記事：next/imageで画像を最適化する