こんにちは！
前回の記事では、初めてGitHubにリポジトリを作成してプッシュするまでを学習記録としてまとめました。

今回はその続きとして、GitHubに置いたNext.jsアプリをVercelにデプロイしてみた体験を整理します。
「ローカルで作ったアプリがURLで世界に公開される」この瞬間は、めちゃくちゃテンションが上がりました！

1. VercelにログインしてGitHub連携

まずはVercelにアクセスし、GitHubアカウントでログインしました。

• 「Add New... → Project」を選択
• GitHubのリポジトリ一覧から、先ほど作ったNext.jsのリポジトリを選択

👉 ここで一つ目のつまずき。
「リポジトリが出てこない！」という現象が…。
調べたら、GitHub連携時に「全リポジトリへのアクセス権限」を付与していなかったのが原因でした。
設定を直したら無事表示されました。

2. デプロイの設定

Vercelが自動でフレームワークを判定してくれるので、Next.jsだと基本は触らずにOK。

• Framework Preset: Next.js
• Root Directory: /（特にサブディレクトリでなければデフォルトのまま）
• Build Command: next build
• Output Directory: .next

「Deploy」ボタンをクリック！

3. 初めてのエラー体験

「Deploy成功！」といきたかったのですが、最初はエラーで止まりました…。

原因は 環境変数 .env.local を設定していなかったこと。
ローカルでは.envファイルを使っていたのですが、Vercelは別途「Project Settings → Environment Variables」で設定しないと反映されません。

👉 ここで学んだこと

• .env.local の内容は自動でアップロードされない
• Vercel上で同じ値を入力してあげる必要がある

4. 無事にデプロイ成功！

環境変数を設定し直して再デプロイ。
数十秒後、https://my-app.vercel.app/ のようなURLが発行されました！

ローカルでしか動かなかったNext.jsアプリが、世界中どこからでもアクセスできるようになった瞬間は感動的でした。

さらに便利なのが、GitHub連携していると git push するだけで自動で再デプロイしてくれること。
修正 → push → 数分後には反映、という流れが本当に楽です。

5. 学んだことまとめ

• GitHub連携のときはアクセス権限に注意（リポジトリが表示されないこともある）
• 環境変数はVercel側で設定が必要
• push すれば自動で再デプロイ → 作業効率が爆上がり

さいごに

Next.js × Vercel の組み合わせは、初心者でも「最速で公開」できる最強タッグでした。
ただ、エラーになったときは焦ります。でも調べて一つずつ解決すれば、知識として積み上がっていく実感があります。

次は カスタムドメインを設定して「自分のURL」で公開する」 に挑戦してみたいと思います。