Next.js でprocess.envで環境値を設定して使う方法

Nextで実装していたときに、

各種APIのURLなど、

設定値の情報などを、

環境設定値として使いたいことがあります。

実際の値としては、

• 画像ファイルのパス
• APIのURL

など、

各ページのコードに書くよりは、

共通で管理できると便利なことはよくあります。

今回は、

こちらの設定情報を、

process.env.xxxxx

という形で扱う方法をメモしておきます。

参考にした公式サイトの情報

こちらのサイトを参考にしました。

リンクをメモ。

Next.jsの公式サイト「Environment Variables」

Next.jsの「next.config.js」に設定情報を追加

実際に設定ファイルに追加していきます。

設定ファイルとしては、

以下のファイルを変更します。

next.config.js

変更内容としては、

const nextConfig = {
   :
  env: {
    プロパティ: 値,
  },
}

という形で、

• キーとなる値の「プロパティ」
• 実際の設定情報を持つ「値」

の２つを設定します。

具体的には、

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

このように、

実際のプロパティと値を指定して、

自分なりの情報を設定します。

設定した値を各ページ側で取得する方法

先ほどの設定例として、

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

こちらの設定情報を見ていくと、

• 「プロパティ」として「customKey」
• 「値」として「my-value」

という値を設定しました。

こちらをページ側で取得するには、

process.env.customKey

という形で、

実際のプロパティの値を取得できます。

設定値の変更時は、Next.jsの再起動も忘れなく

環境変数を、

next.config.jsに設定または変更した際は、

Next.jsアプリ自体の再起動もお忘れなく。