Next.jsでdotenvを使う方法

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

まずはNext.jsでdotenvを導入する上で必要なモジュールをインストールします。

npm i dotenv-webpack

next.config.jsにてdotenvの設定を行う

以下みたいな感じでOK。

next.config.js

require("dotenv").config();

const path = require("path");

const Dotenv = require("dotenv-webpack");

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

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

      new Dotenv({
        path: path.join(__dirname, "env"),
        systemvars: true
      })
    ];

    return config;
  }
};

これで「process.env.」が使えるようになります。