Next.jsの環境変数（エンバイロンメントヘンスウ）の設定を完全ガイド！初心者でもわかる.envの使い方
生徒
「Next.jsで環境変数って聞いたんですが、何のために使うんですか？」
先生
「環境変数は、パスワードや設定情報を安全に管理するための仕組みです。」
生徒
「パスワードをそのまま書かなくていいってことですか？」
先生
「その通りです。Next.jsでは.envファイルを使って簡単に設定できます。」
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>
);
}
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を使うことで、個人用の設定を安全に保てます。 これにより、うっかり秘密を書いたまま公開してしまう事故を防げます。
