トミケルの本音

日々の仕事や趣味で感じたことを綴るブログ

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

1. .env ファイルの使い分け

  • .env: すべての環境で共通の設定。
  • .env.local: ローカル専用（通常開発時に使用）。 npm run dev
  • .env.development: 開発環境専用。 npm run dev
  • .env.production: 本番環境専用。 npm run build
  • .env.test: テスト環境専用。

Next.jsは、環境に応じて適切なファイルを自動的に読み込みます。

//読み込む際は process.env.変数名
variable = process.env.SAMPLE
JavaScript

注意点

  1. .env.local は .gitignore に追加して、リポジトリに含めないようにする。
  2. 本番環境の設定は、Vercelや他のホスティングサービスで直接管理するのが推奨。
  3. NEXT_PUBLIC_ を付けた変数はブラウザで見られる可能性があるため、機密情報には使用しない。

2. 環境変数の使い分け（フロント vs バックエンド）

✅ 基本ルール

  • フロントエンド（クライアントサイド）で使うためには、NEXT_PUBLIC_ が必要。
  • バックエンドはどのような書き方でも問題ない。
変数名クライアントサーバー使える場所
NEXT_PUBLIC_〜✅ 使える✅ 使えるどちらでもOK
通常の名前❌ 使えない✅ 使えるサーバーのみOK

🌐 クライアントサイドで使える環境変数

  • NEXT_PUBLIC_ を プレフィックスに付ける
  • コンポーネント・JSファイルなど、ブラウザで動くコードからアクセスできる
  • 公開しても問題ない情報だけにする

使いどころ：

  • reCAPTCHA の site key
  • 公開用のAPIエンドポイントなど

🖥 サーバーサイド専用の環境変数

  • NEXT_PUBLIC_ を付けない
  • サーバー上だけで使う変数。APIルート・サーバーアクション（”use server”）など

使いどころ：

  • メール送信（RESEND_API_KEY）
  • reCAPTCHA検証（RECAPTCHA_SECRET_KEY ）
  • DBアクセスなど

✅ ファイルへの書き方

NEXT_PUBLIC_RECAPTCHA_SITE_KEY=your-public-site-key//Accesible from Client side
RECAPTCHA_SECRET_KEY=your-secret-key //Accesible from only server side
JavaScript
  • NEXT_PUBLIC_〜：クライアントからアクセス可能
  • それ以外：サーバー専用

✅ Vercel での設定

  1. プロジェクトの Settings → Environment Variables
  2. 上記と同じ名前で登録（公開用なら NEXT_PUBLIC_〜）