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アプリ自体の再起動もお忘れなく。
ピックアップ
こちらもおすすめ
初心者向けの色々な情報はあるけれど、
- 無料でお試しができるスクール
- ホームページなど簡単に作成できる
- 組織で使いたいサービス
について、
少しでも試して良いものがあると、
それを活用することで学習や業務などが効率化できるので、
おすすめのサイトなどをいくつか紹介しておきます
