Phase 6｜世に出す全3ステップ中 3つめ

環境変数の扱い

このページのゴール：ローカルと本番で環境変数の置き場所が別物だと分かる

所要時間の目安: 10分動作確認日: 2026-08-05

手順

5-6で学んだとおり、秘密の値は .env 系のファイルに書きます。

Next.jsでは .env.local というファイル名が定位置です。アプリは起動時に、このファイルから値を読み込みます。

ターミナルに貼り付ける

cat ~/dev/my-app/.gitignore

表示された一覧の中に、.env で始まる行があるはずです。

これが「GitHubには上げない」という除外指定です。ひな形の生成時から入っています。5-6で学んだ守りが、最初から効いているということです。

流れを順に追うと、こうなります。

ローカルでは .env.local から値が読める。本番では読むものが無い。だから「ローカルでは動くのに本番で動かない」が起きます。

本番の環境変数は、Vercelのプロジェクト画面で登録します。

Settings → Environment Variables を開き、.env.local と同じ「名前」と「値」を登録します。

登録・変更のあとは、反映のために再デプロイが必要です。もう一度 git push するか、Vercelの画面から再デプロイします。環境変数はビルド（アプリを本番用に組み立てる工程）の時に読み込まれるためです。

今の my-app に秘密の値はまだありません。実際に登録するのは、Guideのデータベース編などでキーを扱う時です。「置き場所が2つある」ことさえ覚えていれば、その日に困りません。

✅ ここまで出来たらOK

確認すること：「ローカルは .env.local、本番はVercelの Environment Variables」と自分の言葉で説明できる

そうならない場合 → エラー逆引きページを見てください。

本番環境production ／ホンバンカンキョウ

実際のユーザーがURLで触る側の環境。手元の開発用（ローカル）と対にして使う言葉。「ローカルでは動くのに本番では動かない」を切り分ける第一歩が、この2つの区別。

ビルドbuild ／ビルド

書いたコードを、本番で高速に動く形へ組み立て直す工程。Vercelはpushのたびにこれを実行する。環境変数の多くはビルド時に読み込まれる。だから登録後に再デプロイが要る、と理解できる。

Vercelに環境変数を登録したのに、本番に反映されない

登録しただけでは反映されません。再デプロイが必要です。もう一度pushするか、Vercelの画面から再デプロイしてください。

.env.local をGitHubに上げてしまった

5-6で学んだとおり、消しても履歴に残ります。書いてあったキーは「漏れたもの」として扱い、発行元で無効化して作り直してください。手順に迷ったら、状況をそのままClaudeに貼って相談してください。

本編はここで完了です。応用の紹介（読むだけ）に進むか、自分の作りたいものに取りかかりましょう。