AIが作ったアプリをVercelにデプロイする

あなたがAIの力を借りて作ったWebアプリ、まだ自分のパソコンの中だけで眠っていませんか？ たとえるなら、美味しい料理を作ったのに、お皿に盛ってテーブルに出していない状態です。

このレッスンでは、あなたのアプリをインターネット上に「公開する（＝デプロイする）」方法を、AIの助けも借りながら15分で完了させます。途中で困ったときもAIに聞けば大丈夫です。

このレッスンを進める前に、次の準備ができているか確認しましょう。

• ✅ Next.js のプロジェクト（＝AIと一緒に作ったアプリのひな形）が自分のパソコンにある
• ✅ インターネットにつながっている
• ✅ GitHub（＝コードをクラウドで管理するサービス）のアカウントを持っている
• ✅ GitHubにコードがすでに上がっている（前のレッスン「Git & GitHub CLI」で済んでいるはず）

もし「Next.jsプロジェクトがない」場合は、先に「AIでNext.jsアプリを作る」レッスンを終えてから戻ってきてください。

上の図が、これからやることの全体像です。大きく分けると ①ビルド確認 → ②Vercelアカウント作成 → ③プロジェクトをインポート → ④公開を確認 の4ステップです。

Vercelにデプロイする前に、まず自分のパソコン上でアプリが正しく動くかチェックしましょう。料理でたとえると、お店に出す前に味見をするステップです。

ターミナル（＝パソコンに命令を出す画面）で次の1行を実行してください。

pnpm build

何をしているか: あなたのアプリを「公開用の形」に変換しています。ここでエラーが出たら、公開しても正しく表示されません。

エラーが出たらAIに聞く

もし赤い文字でエラーが表示されたら、あわてずにAIに助けてもらいましょう。

Claude Code / Cursor で聞く場合のプロンプト例:

pnpm build を実行したら次のエラーが出ました。原因と修正方法を教えてください: （ここにエラーメッセージを貼り付ける）

ChatGPT で聞く場合のプロンプト例:

Next.jsアプリで pnpm build を実行したところ以下のエラーが出ました。初心者にもわかるように修正手順を教えてください: （ここにエラーメッセージを貼り付ける）

良い例と悪い例

• ✅ 良い例: エラーメッセージ全文をコピーしてAIに貼り付ける → 的確な回答が返ってくる
• ❌ 悪い例: 「エラーが出ました」とだけ伝える → AIも原因がわからず、あいまいな回答になる

ポイント: エラーメッセージは「赤い文字の部分」を全部コピーして貼り付けるのがコツです。

Vercel（ヴァーセル）は、Next.jsアプリを公開するのに最も適したサービスです。 「Webアプリをインターネットに公開する窓口」と考えてください。無料プランで十分使えます。

1. ブラウザで vercel.com にアクセスする
2. 右上の Sign Up（＝新規登録）ボタンを押す
3. Continue with GitHub を選んで、GitHubアカウントでログインする
4. 画面の案内に従って権限を許可する

良い例と悪い例

• ✅ 良い例: GitHubアカウントでログインする → あとでコードの連携がスムーズ
• ❌ 悪い例: メールアドレスだけで登録する → GitHubとの連携を後で手動設定する手間が増える

すでにVercelアカウントを持っている場合は、このステップはスキップしてください。

Vercelがあなたのアプリを公開するためには、コードがGitHubに上がっている必要があります。 たとえるなら、レシピを共有フォルダに入れて、料理人に見てもらう準備です。

ターミナルで次の1行を実行してください。

git status

何をしているか: コードの状態を確認しています。「nothing to commit, working tree clean」と出れば、すべてのコードがGitHubに送信済みです。

もし未送信のファイルがある場合は、次の2行を順番に実行してください。

git add -A && git commit -m "deploy準備"

git push origin main

何をしているか: 1行目で変更をまとめて記録し、2行目でGitHubに送信しています。

GitHubにコードが上がったら、Vercelに「このコードを公開して」と伝えます。

1. Vercelのダッシュボード（＝管理画面）を開く
2. Add New... → Project を押す
3. GitHubのリポジトリ（＝コードの保管場所）一覧から、あなたのプロジェクト名を探して Import を押す
4. 「Configure Project」画面が出るが、設定はすべてそのままでOK
5. Deploy ボタンを押す

大事なポイント: 設定項目は変更しないでください。Vercelは Next.js のプロジェクトを自動で認識してくれるので、そのままで正しく動きます。

デプロイには1〜2分かかります。画面に「Congratulations!」と表示されるのを待ちましょう。

リポジトリが一覧に出ないときは

VercelにGitHubのリポジトリが表示されない場合は、以下を試してください。

1. 「Adjust GitHub App Permissions」というリンクを押す
2. GitHubの設定画面で、対象のリポジトリにチェックを入れて保存する
3. Vercelに戻って画面をリロード（再読み込み）する

デプロイが完了すると、Vercelがあなたのアプリ専用のURL（＝インターネット上の住所）を発行してくれます。

1. 「Congratulations!」画面、またはダッシュボードに表示されたURLをクリックする
2. ブラウザであなたのアプリが表示されれば成功です！

確認チェックリスト

次の4つをすべて確認してください。

• ページが真っ白ではなく、内容が正しく表示される
• 画像が表示されている（「壊れた画像」マークが出ていない）
• リンクを押したときに正しいページに移動する
• スマホで開いてもレイアウトが大きく崩れていない（パソコンのブラウザで画面幅を狭くしてもOK）

成果物を記録する

このレッスンの完了証拠として、次の2つを手元に控えておきましょう。

1. 公開URL: Vercelが発行したURL（例: https://あなたのプロジェクト名.vercel.app）
2. スクリーンショット: ブラウザでアプリが表示された画面をキャプチャ

AIに聞くときのプロンプト例

デプロイで困ったときは、以下のようにAIに質問すると的確な回答が得られます。

Vercelでデプロイしたら以下のエラーログが出ました。初心者向けに原因と修正方法を教えてください: （Vercelのデプロイログから赤い文字の部分をコピーして貼り付ける）

おめでとうございます！これであなたのアプリが世界中からアクセスできるようになりました。

次にやれることの例:

• アプリのコードを更新して git push すると、Vercelが自動で最新版に更新してくれます
• 独自ドメイン（＝オリジナルのURL）を設定して、自分だけのアドレスにできます
• 友人や家族にURLを送って、実際に使ってもらいましょう