サムネイル

Next.jsにおける環境変数の設定方法。

2022年03月17日に公開

2023年04月24日に更新

はじめに

おはようございます。こんにちは。こんばんわ。
Watatakuです。
今回の書いていく内容は「Next.js における環境変数の基本的な設定方法」です。

env ファイルの基本的な使い方の参考になれば幸いです！

環境変数の基本的な設定方法

バージョン 9.4 以上の Next.js から、環境変数のサポートが組み込まれています。

環境変数を設定する基本的な方法は以下の通りです。

基本的には .env.local に環境変数を定義（詳細は後述）
設定した環境変数を呼び出すときは process.env.環境変数名 とする
ブラウザで環境変数を使用したい場合は、先頭の文字を NEXT_PUBLIC_ とする

// .env
API_KEY=abcdefghijk

// pages/index.tsx
import { GetStaticProps } from 'next';

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () => {
  console.log(process.env.API_KEY);
  ...
};

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    <>
      {process.env.API_KEY}
    </>
  );
}

Next.js では env ファイル名に応じて、開発 / 本番環境で切り替えることができます。具体的なルールは以下の通りです。

.env：常に読み込み
.env.development：開発環境
.env.production：本番環境
.env.local：常に読み込み
.env.development.local：開発環境
.env.production.local：本番環境

基本的にシークレットな値は .env*.local で定義を行い、.gitignore でリポジトリから除外します。
一方で、.env / .env.development / .env.production は、リポジトリに含めます。URL や企業名などデフォルト値などを定義するときに使いましょう。