Next.jsでnext.config.jsを使って環境変数をあつかう方法

Next.js にはシステム内で利用できる環境変数の設定を next.config.js というファイルを使って行えます。

next.config.js 内では Next.js が起動されたモード（phase）を知ることができるので、デバッグ時、本番環境時などで環境変数を切り替えることもできます。

Next.jsでnext.config.jsを使って環境変数をあつかう

Next.js で環境変数をあつかうには next.config.js に設定する方法が一番楽だと思います。

まずは Next.js の起動ディレクトリに next.config.js というファイルを作成します。

作成したらテキストエディターなどで開いて環境変数を設定します。

module.exports = ( phase, { defaultConfig }) => {
}

next.config.js 内には phase と呼ばれるコンパイル時のモードが渡されます。

実際には上記の phase を使って処理を分岐させます。

phase の各定義は next/constants を参照することで利用できるようになります。

const { PHASE_PRODUCTION_BUILD } = require( "next/constants" ) ;
const { PHASE_PRODUCTION_SERVER } = require( "next/constants" ) ;
const { PHASE_DEVELOPMENT_SERVER} = require( "next/constants" ) ;
const { PHASE_EXPORT } = require( "next/constants" ) ;

module.exports = ( phase, { defaultConfig }) => {
  if( phase === PHASE_DEVELOPMENT_SERVER ){ //npm run devで起動された時
    return {
      env: {
           //ここで環境変数を設定する
           SAMPLE_ENV1 : "dev-sample_env1",
           SAMPLE_ENV2 : "dev-sample_env2",
        }
    }
  }
  else if( phase === PHASE_PRODUCTION_BUILD ) {//npm run buildで起動された時
    return {
      env: {
           //ここで環境変数を設定する
           SAMPLE_ENV1 : "build-sample_env1",
           SAMPLE_ENV2 : "build-sample_env2",
        }
    }
  }
  else if( phase === PHASE_PRODUCTION_SERVER ) {//npm run startで起動された時
    return {
      env: {
           //ここで環境変数を設定する
           SAMPLE_ENV1 : "start-sample_env1",
           SAMPLE_ENV2 : "start-sample_env2",
        }
    }
  }
  else if( phase === PHASE_EXPORT ) {//npm run exportで起動された時
    return {
      env: {
           //ここで環境変数を設定する
           SAMPLE_ENV1 : "export-sample_env1",
           SAMPLE_ENV2 : "export-sample_env2",
        }
    }
  }
}

ここまで設定すれば、あとはシステム内のどこでもその値を参照することが可能になります。

参照方法は process.env.設定した変数名 で参照できるようになります。

console.log( "SAMPLE_ENV1=" + process.env.SAMPLE_ENV1 ) ;
console.log( "SAMPLE_ENV2=" + process.env.SAMPLE_ENV2 ) ;

まとめ

Next.js で 環境変数をあつかうには next.config.js を使えば起動モード（phase）ごとに異なった値を設定できるようになります。