ClaudeCodeでVercelへデプロイする方法【Next.jsアプリ公開完全ガイド】
「自分のNext.jsアプリを世界に公開したい」「でもサーバー設定やドメイン設定が難しそう」と感じていませんか。Vercelは、Next.jsの開発元が運営するホスティングサービスで、GitHubと連携するだけで数クリックでアプリを公開できます。さらにClaudeCodeを組み合わせれば、設定ファイル作成、環境変数管理、CLIコマンド、エラー解決まですべて自然な日本語で進められます。本記事では、Vercelの基本からClaudeCodeを使った実践的なデプロイ手順、カスタムドメイン設定、環境変数管理、トラブルシューティングまでを、初心者にも分かるように徹底解説します。
結論：ClaudeCode×Vercelで「30分でアプリ公開」が現実に
結論を先に言うと、ClaudeCodeとVercelを使えば、Next.jsアプリの初回デプロイは30分以内に完了します。これは決して誇張ではなく、必要なステップが極めて少ないからです。
理由は3つあります。1つ目は、VercelがNext.jsの開発元（Vercel社）が運営しているサービスである点です。設定ファイルなしでも、Next.jsの機能（ISR、Edge Functions、Image Optimization）がすべて最適化された状態で動きます。
2つ目は、GitHub連携によって、リポジトリへのpushが即デプロイにつながる点です。CI/CDパイプラインを手動で組む必要がなく、PRを出すたびにプレビュー環境も自動生成されます。
3つ目は、ClaudeCodeがvercel.jsonの生成、環境変数の登録、CLIコマンドの実行までを日本語で受け付けてくれる点です。エラーが出ても「このエラーを直して」と貼り付けるだけで原因と解決策が返ってきます。
ただし、扱う情報によっては注意も必要です。会員データや決済情報などのセンシティブ情報を扱う場合、Vercelの標準機能だけでは認証が弱い場合があるため、必要に応じて社内のエンジニアに相談しながら進めてください。一般的な情報発信サイトやポートフォリオであれば、Vercelで何の問題もなく公開できます。
以下では、Vercelの基礎、CLIインストール、ClaudeCodeを使った初回デプロイ、カスタムドメイン、環境変数管理、よくあるトラブル対処までを順に解説していきます。
Vercelとは：Next.jsに最適化されたホスティングサービス
Vercelは、フロントエンドアプリのホスティングに特化したクラウドサービスです。特にNext.jsとの相性が抜群で、Next.jsの新機能はVercel上で最初にサポートされます。
Vercelの主な特徴は次のとおりです。
- GitHubと連携した自動デプロイ：リポジトリにpushするだけで本番反映。
- プレビューデプロイ：PRごとに固有のURLが自動生成され、レビュー時に動作確認可能。
- エッジネットワーク：世界中のCDNから配信され、表示速度が極めて速い。
- サーバーレス関数：APIルートが自動的にサーバーレス関数として動作。
- 無料プランが充実：個人利用なら帯域100GB/月、無制限のプロジェクト作成が可能。
料金プランは、Hobby（無料・個人利用）、Pro（月20ドル・商用利用可）、Enterprise（要問い合わせ）の3段階です。趣味プロジェクトや学習目的であればHobbyで十分、業務利用するならProが必要になります。
ホスティング先としてのVercelは、Next.js、React、Vue、Svelte、Astro、Nuxtなど多くのフレームワークをサポートしていますが、本記事では最もよく使われるNext.jsを軸に解説します。
Vercel CLIのインストールとアカウント連携
Vercelの利用には、Webダッシュボードから操作する方法と、CLI（コマンドラインインターフェース）から操作する方法があります。ClaudeCodeと連携するならCLIの方が圧倒的に便利です。
プロンプト例1：CLIのインストールとログイン
このマシンにVercel CLIをインストールして、Vercelアカウントにログインしてください。
私はまだVercelに登録していないので、登録方法も教えてください。
ClaudeCodeは次のような手順を案内します。
- アカウント登録：https://vercel.comにアクセスし、「Sign Up with GitHub」をクリック。GitHubアカウントで連携が最も楽。
- CLIインストール：ターミナルで以下のコマンドを実行。
npm install -g vercel
- ログイン：
vercel login
メールアドレスを入力すると、確認メールが届きます。メール内のリンクをクリックするとログイン完了です。
- 確認：
vercel whoami
自分のユーザー名が表示されれば成功です。
ClaudeCodeで初回デプロイを実行する
CLIが使えるようになったら、いよいよ初回デプロイです。ClaudeCodeに頼むと、必要なファイル生成からコマンド実行まで一気にやってくれます。
プロンプト例2：Next.jsプロジェクトの初回デプロイ
このディレクトリのNext.jsプロジェクトをVercelにデプロイしてください。
- 初回デプロイなので、新規プロジェクトとしてセットアップ
- プロジェクト名は「my-portfolio」
- 本番環境（--prod）にデプロイ
ClaudeCodeは次のコマンドを実行します。
vercel --prod
初回実行時には、いくつかの質問にインタラクティブに答える必要があります。
- Set up and deploy "~/projects/my-app"? →
Y - Which scope? → 個人アカウントを選択
- Link to existing project? →
N（新規の場合） - Project name? →
my-portfolio - In which directory is your code located? →
./ - Detected Next.js. → そのままEnter
しばらく待つと、https://my-portfolio-xxxx.vercel.appのような公開URLが表示されます。これでデプロイ完了です。
プロンプト例3：vercel.jsonによる細かい設定
vercel.jsonを作成して、以下を設定してください。
- リージョンを東京（hnd1）に固定
- /api/* のヘッダーに Cache-Control: no-store を追加
- リダイレクト: /old-blog/* → /blog/*
ClaudeCodeが生成するファイル例：
{
"regions": ["hnd1"],
"headers": [
{
"source": "/api/(.*)",
"headers": [
{ "key": "Cache-Control", "value": "no-store" }
]
}
],
"redirects": [
{
"source": "/old-blog/:path*",
"destination": "/blog/:path*",
"permanent": true
}
]
}
このファイルをリポジトリのルートに置けば、次回のデプロイから設定が反映されます。
GitHub連携で自動デプロイを実現する
CLIで手動デプロイするのも良いですが、本番運用では「GitHubにpushしたら自動デプロイ」が基本です。
設定手順は次のとおりです。
- Vercelダッシュボードで対象プロジェクトを開く。
- 「Settings → Git」を開き、「Connect Git Repository」をクリック。
- GitHubのリポジトリを選択して接続。
これだけで、mainブランチへのpushが本番デプロイ、それ以外のブランチへのpushがプレビューデプロイになります。
プロンプト例4：プレビューデプロイのURL通知設定
PRを作ったときに、Vercelのプレビューデプロイ完了をSlackに通知する方法を教えてください。
GitHub ActionsからWebhookで通知できますか？
ClaudeCodeはVercelのWebhook機能とSlack連携の手順、必要なら補助ワークフローまで提案してくれます。
カスタムドメインの設定方法
vercel.appのサブドメインは便利ですが、独自ドメイン（例：example.com）を使うとプロらしさが格段に上がります。
プロンプト例5：独自ドメインを接続する手順
example.comというドメインをお名前.comで取得しました。
このドメインをVercelプロジェクトに接続する手順を教えてください。
ClaudeCodeは次のような手順を案内します。
- Vercelダッシュボードでプロジェクトを開き、「Settings → Domains」を選択。
- 「Add」をクリックして
example.comを入力。 - Vercelが指示するDNSレコード（AレコードまたはCNAME）をお名前.comの管理画面で設定。
- Aレコード：
@→76.76.21.21 - CNAME：
www→cname.vercel-dns.com
- Aレコード：
- DNSが反映されるまで数分〜数時間待つ。
- SSL証明書はVercelが自動で発行（Let's Encrypt）。
wwwを非標準扱いにしてリダイレクトしたい場合も、Vercelのドメイン設定画面で「Redirect」ボタン1つで完結します。
環境変数の設定と管理
APIキーやデータベース接続文字列など、コードに直接書きたくない値は環境変数で管理します。
Vercelで環境変数を設定する3つの方法：
- ダッシュボードから：「Settings → Environment Variables」で追加。Production、Preview、Developmentそれぞれに値を分けられる。
- CLIから：
vercel env add DATABASE_URL production
.env.localファイル：ローカル開発時はこのファイルで管理。.gitignoreに必ず追加すること。
プロンプト例6：環境変数の安全な管理
このNext.jsアプリでSupabaseを使います。
- NEXT_PUBLIC_SUPABASE_URLとSUPABASE_SERVICE_ROLE_KEYを設定
- ローカルは.env.localで管理（.gitignoreに追加）
- 本番はVercelの環境変数に登録
.gitignoreの確認と、Vercel CLI経由での環境変数登録コマンドを教えてください。
ClaudeCodeは.gitignoreを確認し、.env*.localが含まれていなければ追加した上で、次のようなコマンドを提示します。
vercel env add NEXT_PUBLIC_SUPABASE_URL production
vercel env add SUPABASE_SERVICE_ROLE_KEY production
重要な注意点：NEXT_PUBLIC_で始まる環境変数はブラウザに公開されます。秘匿情報は絶対にNEXT_PUBLIC_プレフィックスを付けてはいけません。これはClaudeCodeも警告してくれます。
実践チュートリアル：ポートフォリオサイトを公開する
ここでは、ゼロからNext.jsポートフォリオサイトを作成し、Vercelに公開するまでの一連の流れを体験します。
ステップ1：プロジェクト作成
Next.js（TypeScript、Tailwind CSS、App Router）の新規プロジェクトを
my-portfolioという名前で作成してください。
ClaudeCodeがnpx create-next-app@latestを実行し、対話的に設定を進めます。
ステップ2：シンプルなトップページ作成
src/app/page.tsxを書き換えて、以下のポートフォリオページにしてください。
- 名前：山田太郎
- 肩書き：フロントエンドエンジニア
- 自己紹介：3行程度
- スキル：Next.js、TypeScript、Tailwind CSS
- お問い合わせボタン（mailto:でメール）
- 全体的にミニマルなデザイン
ステップ3：GitHubリポジトリ作成とpush
このプロジェクトをGitHubのprivateリポジトリとして作成し、初回commit & pushしてください。
リポジトリ名はmy-portfolioでお願いします。
ClaudeCodeはgh repo createコマンドで一気に処理します。
ステップ4：Vercelプロジェクト作成と初回デプロイ
このリポジトリをVercelにデプロイしてください。
Hobbyプランで本番デプロイまでお願いします。
ステップ5：独自ドメインの接続（任意）
yamada-portfolio.comを接続してください。
DNSレコードの設定値を分かりやすく教えてください。
ステップ6：継続的な改善
以降は、ローカルで編集してgit pushするだけで自動デプロイが走ります。PRを出せばプレビュー環境のURLがGitHubに自動コメントされ、レビューが楽になります。
デプロイトラブル対処法
最後によくあるトラブルと、ClaudeCodeでの解決方法を紹介します。
ビルドエラー：型エラーで失敗
Vercelのビルドログにこのエラーが出ました。
[エラーログを貼り付け]
ローカルでは動くのに本番でだけエラーが出ます。原因を教えてください。
ClaudeCodeはNode.jsのバージョン差、依存関係の差、環境変数の不足などを順に確認します。
404エラー：デプロイ後にページが表示されない
App Routerの場合、app/ディレクトリ構成が正しいか、page.tsxが存在するかなどを確認します。
環境変数が反映されない
環境変数を追加した後は再デプロイが必要です。「Deployments → 最新デプロイの「...」→ Redeploy」をクリック、またはCLIでvercel --prodを再実行。
Function Timeout
サーバーレス関数の実行時間がHobbyプランの10秒制限を超えるとタイムアウトします。重い処理はEdge Functionに分離するか、Proプランへのアップグレードを検討します。
FAQ：Vercel × ClaudeCode よくある質問
Q1. Vercelのアカウント登録は無料ですか？
はい、Hobbyプランは完全無料です。クレジットカード登録も不要で、すぐに始められます。ただし商用利用はProプラン（月20ドル）が必要です。
Q2. Next.js以外のフレームワークも使えますか？
使えます。React、Vue、Nuxt、Svelte、Astro、Remix、Gatsbyなど主要フレームワークすべてに対応しています。静的HTMLもデプロイ可能です。
Q3. データベースはどうすればいいですか？
Vercelは静的アプリ＋サーバーレス関数のホスティングなので、データベース機能はありません。Supabase、Neon、PlanetScale、Vercel Postgresなどの外部DBサービスと組み合わせて使います。
Q4. ClaudeCodeに頼んだら本番に直接デプロイされてしまいました。プレビューだけにできますか？
はい、vercel（--prodなし）で実行すれば、プレビューデプロイのみが行われます。プロンプトでも「本番ではなくプレビューにデプロイして」と明示すれば安全です。
Q5. ドメインの料金はVercelに支払うのですか？
Vercel経由で購入することもできますが、お名前.comやムームードメインなど他社で取得したドメインも自由に接続できます。ドメイン購入費用は別途その業者に支払います。
Q6. デプロイログはどこで見られますか？
Vercelダッシュボードの「Deployments」タブで全履歴が見られます。失敗したデプロイのログをコピーしてClaudeCodeに貼り付ければ、原因分析を依頼できます。
Q7. プレビューURLを社外に共有しても大丈夫ですか？
Hobbyプランではプレビューデプロイが誰でもアクセス可能なため、機密情報を含む場合は注意が必要です。ProプランではPassword Protectionが使え、URLにアクセス制限をかけられます。社内情報を扱う場合はエンジニアに相談してください。
まとめ
VercelはNext.jsアプリを最も簡単に公開できるホスティングサービスであり、ClaudeCodeと組み合わせることで非エンジニアでもプロ品質のデプロイ環境を構築できます。CLIのインストールから初回デプロイ、独自ドメイン接続、環境変数管理まで、すべて自然な日本語で進められるため、技術的な細部に時間を取られず本来のサービス開発に集中できます。重要なのは、NEXT_PUBLIC_プレフィックスの扱いと環境変数管理を正しく行うこと、そして機密情報を扱う場合はエンジニアに相談することです。まずは小さなポートフォリオサイトから始めて、Vercelの便利さを体感してみてください。