プログラミングを始めた人が最初に感動するのは、「自分のコードがブラウザで動いた！」という瞬間です。

でも、多くの人がその次で止まります。「動いた」の感動から、「インターネットで誰でも見られる状態にする（公開する）」までの間に、未経験には見えにくい地味な壁があるからです。

今回は、ローカルで動いた Next.js アプリを実際にインターネットへ公開するところまでを、AI（Claude Code）と一緒に進めた手順を、詰まった箇所ごとに書きます。「作ったけど、この先どうするの？」で止まっている人向けです。

そもそも「公開」って何をするの？

ローカルのアプリを公開するには、ざっくり2段階あります。

  1. コードを GitHub に上げる（git というバージョン管理の仕組みを使う）
  2. GitHub のコードを Vercel などのサービスに繋いで、公開URLを発行する

文字にすると2行ですが、未経験がいきなりやると各段階で必ず詰まります。ここからは、実際に踏む順番で「AIへの頼み方の悪い例 → 良い例」も添えて進めます。

段階1：git で初コミット

最初の関門が git です。ここで多いのが、こういう頼み方です。

❌ 悪い例：「git で保存して」

これだとAIは一般論を返してくるだけで、自分のフォルダで何をどう打てばいいか分かりません。AIは「あなたの状況」を知らないので、状況を渡すのがコツです。

✅ 良い例：「Next.js のプロジェクトを今作った。まだ一度も git を使っていない。このフォルダを git で管理して、最初のコミットをするまでのコマンドを、1つずつ何をしているか説明しながら教えて」

こう頼むと、git init（管理を始める）→ git add .（変更をまとめる）→ git commit -m "first commit"（記録する）という流れを、意味つきで出してくれます。「1つずつ、何をしているか説明しながら」を付けるだけで、コピペではなく理解しながら進められます。

つまずきポイント：.gitignore を作らずに node_modules まで上げてしまう事故。これも「node_modules や .env は上げたくない。.gitignore を作って」と一言頼めば防げます。

段階2：GitHub に push

次に、手元のコミットを GitHub（ネット上の保管場所）へ送ります。ここで詰まるのは、たいてい「リポジトリの作成」と「認証」です。

✅ 良い例：「GitHub に新しいリポジトリを作って、今のローカルのコードを push したい。GitHub 側で先に何を操作して、手元で何を打てばいいか、順番に教えて。認証で失敗しがちなポイントも先に教えて」

「失敗しがちなポイントも先に」と添えると、「HTTPS だとトークンが必要」「パスワード認証はもう使えない」といった、初心者が必ず一度は踏む落とし穴を先回りで教えてくれます。エラーを見てから調べるより、先に地雷の場所を聞いておく方が速いです。

段階3：Vercel でデプロイ

GitHub に上がれば、公開はかなり近いです。Vercel というサービスに GitHub アカウントで繋ぎ、リポジトリを選ぶと、自動でビルドして公開URLを発行してくれます。

ただ、ここで未経験が一番よく食らうのが 「ローカルでは動くのに、Vercel 上でビルドが失敗する」 です。原因の多くは環境変数（API キーなど）で、ローカルの .env はネットに上げていないので、Vercel 側にも同じ値を登録する必要があります。

✅ 良い例：「Vercel でデプロイしたらビルドが失敗した。エラーログを貼るので、原因と直し方を、初心者に分かる言葉で説明して。（ここにログを貼る）」

エラーログをそのまま貼るのが最強です。AIはログを読んで「この環境変数が Vercel 側に無い」といった具体的な原因まで当ててくれます。

本当に難しかったのは「エラー」ではなかった

一通りやってみて分かったのは、詰まる原因は個々のエラーそのものではなく、「自分が何を分かっていないのか分からない」状態だということです。

git・push・デプロイという言葉の意味も、どこで何をすればいいのかも、最初は霧の中です。従来はこの霧を、検索と本と試行錯誤で少しずつ晴らしていくしかありませんでした。

AIと一緒に進める最大の価値は、この「何が分からないか分からない」に、その場で何度でも質問して輪郭を与えられることです。恥ずかしがらずに「そもそも push って何？」と聞ける相手が常に隣にいる。これが、公開まで到達できるかどうかの分かれ目になります。

面談なしで、今日から始められます

この講座は 未経験から Next.js + Supabase + Claude Code で Webアプリを作って公開するまで を全20セッションで体系化した教材付きプランです。無料相談を挟まず、申し込んだその日から教材で学習を始められます。AIが学習パートナーになって何度でも質問でき、つまずいた所だけチャットで直接サポートします。

  • 今日から始める（教材完全版＋月5,500円・チャット質問し放題・いつでも解約OK）→ https://menta.work/plan/20251?ref=menta-knowledge
  • いきなりは不安な方へ：無料の教材体験版もあります（最初の数セッション分）→ プラン詳細をご覧ください