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: {
プロパティ: 値,
},
}
という形で、
- キーとなる値の「プロパティ」
- 実際の設定情報を持つ「値」
の2つを設定します。
具体的には、
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アプリ自体の再起動もお忘れなく。
スキルを使って、就職/転職/副業する時のサイト
プログラミングのスキルなどを、自分なりに高めた上で、
自分のスキルをアピールして就職や転職を行い、年収をあげるか、
副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。
まずはできる範囲で取り組むことで、
少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。