Next.jsでdotenvを使う

June 22nd, 2019

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

ちなみにexampleがある。

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

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

はnodejs用(webpackではない)なので、

を使う。

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 経由で好きに読める。

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

AUTHOR

Daisuke Tsuji
Daisuke Tsuji@dim0627

フリーのWeb Developer。

RubyとかRailsを触ってる時間が多い。コーディングもマークアップもライティングもデザインもSEOもやるタイプ。

だいたいどれもだめ。