こんにちは！今回は 環境変数（.envファイル） について書きます。
Next.js や Supabase を使い始めたときに必ず出てくる「APIキーどう管理するの？」問題。
私は最初、かなり混乱しました…。

そもそも環境変数って？

• プロジェクトで使う 秘密情報（APIキーやDB接続情報） をコードにベタ書きせずに、安全に管理する仕組み。
• Next.js では、プロジェクト直下に .env.local ファイルを置くのが基本です。

例：.env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here

学習初期の失敗談 😅

最初にAPIキーを使おうとしたとき、私はこう書いてました。

const supabase = createClient(
  "https://xxxxx.supabase.co",
  "your-anon-key-here"
)

これを GitHub に push してしまい、
「APIキーそのまま公開しちゃった！💦」という大失敗…。

後で「環境変数を使うべきだった」と気づきました。

Next.jsでの環境変数の使い方

Next.js では .env.local に書いた内容は、自動で process.env から参照できます。
ただし、クライアントサイドで使う変数は必ず NEXT_PUBLIC_ をつける ルールがあります。

例：

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
)

ポイント👇

• NEXT_PUBLIC_ → ブラウザから見える（公開OKなキー）
• それ以外 → サーバーサイドでしか使えない（秘密情報）

GitHubに上げないための注意点

.env.local は絶対に公開しちゃいけないので、GitHubに上げないように .gitignore に書いておきます。

.gitignore

.env.local

これで安心！

まとめ

• APIキーはコードに直書きせず、.env.local で管理
• クライアントで使うなら NEXT_PUBLIC_ をつける
• .gitignore で .env.local をリポジトリに含めない

最初は「なんで process.env.NEXT_PUBLIC_〜 って長いんだ…」と思いましたが、慣れると安心感がすごいです。