Next.jsでdotenvを使う

秘匿情報どうするかなと思ったけどとりあえず慣れてるやり方 & Docker化したりしても行けそうなdotenvでやってみようと思う。

ちなみにexampleがある。

next.js/examples/with-dotenv at canary · zeit/next.js

気をつけなきゃいけないのは

• motdotla/dotenv: Loads environment variables from .env for nodejs projects.

はnodejs用（webpackではない）なので、

• mrsteele/dotenv-webpack: A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.

を使う。

dotenv-webpackの導入

npm install --save dotenv-webpack

.env を置く。

touch .env

next.config.jsの設定

exampleは間違ってる（1行目の require('dotenv').config() がいらない）ので注意。

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
  }
}

環境変数の参照

後は process.env 経由で好きに読める。

参考にさせていただきました

• next.js で `process.env` 以下の環境変数を参照する | :-) 🏕