Next.jsでdotenvを使って秘匿情報を扱う

以下の公式ドキュメントではnext.config.jsで環境変数を指定する方法しかなかったので、
使い慣れてるdotenvで秘匿情報を扱いたくなった。

Environment Variables

dotenvではなくdotenv-webpackを使う

dotenvだと環境変数を使うたびに、
require("dotenv").config()を実行する必要がある

そのためdotenv-webpackというライブラリを使うことで、
webpackのコンパイル時にenvファイルの内容をインポートしてくれるようにする。

dotenv-webpackのインストール

yarn add dotenv-webpack --dev

next.config.jsの変更

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

module.exports = {
  target: "serverless",
  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ファイルの中身を使うことができるようになる。
使う側では以下のようにprocess.env.xxxでアクセスする。

process.env.API_KEY