Next.jsでdotenvを使って環境変数を参照する

2020-02-24

Next.jsに入門しました。ドキュメントを読みながら、サンプルアプリケーションを書いてみていたところ、環境変数の読み方にハマったので、調べた結果を備忘録として書いておくことにします。

Next.jsのプロジェクトの作成

特に迷うことはなく、 Learn - Getting Started | Next.js に従って、進めました。

npm run dev

を実行して、http://localhost:3000 にアクセスし、ページが表示できるところまでは簡単にイケると思います。

dotenvとは

dotenvは、npmパッケージとして公開されているOSSで、.envというファイルに記述された環境変数をプログラムから参照する仕組みを提供するパッケージです。アプリケーションが動作するホストやコンテナに環境変数を定義することなく、.envファイルさえあれば、手軽に環境変数を管理できるようになります。

(似たような仕組みに、direnvというのもありますが、こちらはnpmではないですね...)

Next.jsのアプリケーションからdotenv経由で環境変数を参照する

手順としては、

dotenv-webpackをインストールする
next.config.jsにwebpackのプラグインとしてdotenvを使用する設定を書く
.envを書く
アプリケーションから環境変数にアクセスする

という流れなります。

dotenv-webapckをインストールする

npm install --save dotenv-webpack

を実行し、インストールします。

next.config.jsに、webpackのプラグインとしてdotenvを使用する設定を書く

next.config.jsに、

const path = require('path')
const dotenv = require('dotenv-webpack');

module.exports = {
  webpack: config => {
    config.plugins = config.plugins || []

    config.plugins = [
      ...config.plugins,

      // Read the .env file
      new dotenv({
        path: path.join(__dirname, '.env'),
        systemvars: true
      })
    ]

    return config
  }
}

を書きます。

`.env`を書く

Next.jsのプロジェクトに移動し、touch .envを実行します。このファイルに、

FOO=BAR
HOGE=FUGA

のように環境変数を定義します。

アプリケーションから環境変数にアクセスする

.envに書いた環境変数は、アプリケーションからは、process.env.XXXXXXという形式でアクセスすることができます。上記の例では、それぞれ、

process.env.FOO
process.env.HOGE

となります。

Next.jsでdotenvを使って環境変数を参照する方法についてまとめてみました。自分、もっぱらバックエンドの人間ですが、Next.jsで自由にアプリケーションが書けるよう、頑張ってみます。

shimar's blog