1. 環境変数（エンバイロンメントヘンスウ）とは何か

環境変数とは、プログラムの外側で設定する特別な値のことです。たとえば「合鍵付きのメモ」のようなもので、プログラム本体には直接書かず、必要なときだけ読み込みます。 Next.jsでは、APIのURLや秘密のキーなど、他人に見せたくない情報を安全に扱うために環境変数を使います。パソコンを触ったことがない人でも、「設定を書いておく別紙」と考えると理解しやすいです。

2. .envファイルの役割と基本ルール

.envファイルは、環境変数を書いておく専用のファイルです。名前の先頭に「.」が付くのが特徴で、プロジェクトの一番上のフォルダに置きます。中には「名前=値」という形で書きます。スペースは入れず、すべて半角文字で書くのが基本です。このファイルは設定ノートのような存在で、Next.jsが自動的に読み込んでくれます。


NEXT_PUBLIC_SITE_NAME=サンプルサイト
API_SECRET_KEY=abcdefg12345

3. Next.jsで.envを作成する手順

まずNext.jsのプロジェクトを作成したフォルダを開きます。その中に新しく「.env.local」というファイルを作成します。 .env.localは自分のパソコン専用の設定ファイルで、本番用とは分けて管理できます。ファイル名を間違えると読み込まれないため、文字の並びに注意しましょう。


NEXT_PUBLIC_MESSAGE=こんにちはNext.js

4. 環境変数を画面で使ってみよう

設定した環境変数は、Next.jsの画面表示にも使えます。名前の先頭にNEXT_PUBLIC_を付けたものだけが、画面側で使えます。これは「外に見せてもよい情報ですよ」という目印です。 JavaScriptのコードからはprocess.envを通して読み込みます。


export default function Home() {
  return (
    <div>
      <h1>{process.env.NEXT_PUBLIC_MESSAGE}</h1>
    </div>
  );
}

（画面に「こんにちはNext.js」と表示されます）

5. サーバー側だけで使う環境変数

パスワードや秘密のキーなど、絶対に画面に出してはいけない情報もあります。その場合はNEXT_PUBLIC_を付けません。これらの環境変数は、Next.jsのサーバー処理の中だけで使われます。金庫の中にしまっておく重要書類のようなイメージです。


export async function getServerSideProps() {
  const secret = process.env.API_SECRET_KEY;
  return { props: {} };
}

6. 環境変数が反映されないときの注意点

.envを変更したのに画面が変わらない場合は、Next.jsを再起動してみましょう。環境変数は起動時に読み込まれるため、動かしたままでは反映されません。また、ファイル名の打ち間違いや、大文字小文字の違いもよくある原因です。ノートの見出しを間違えると探せなくなるのと同じです。

7. .envファイルを安全に扱うための考え方

.envファイルには大切な情報が書かれているため、他人に渡さないことが重要です。通常は管理対象から外し、自分のパソコンだけで使います。 Next.jsでは.env.localを使うことで、個人用の設定を安全に保てます。これにより、うっかり秘密を書いたまま公開してしまう事故を防げます。

Next.jsの環境変数（エンバイロンメントヘンスウ）の設定を完全ガイド！初心者でもわかる.envの使い方