--> Next.js でprocess.envで環境値を設定して使う方法 - 初心者向けのプログラミング学習・就職・転職情報サイト

学習サポート始めました(有料)

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

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

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

各種APIのURLなど、

設定値の情報などを、

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

実際の値としては、

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

など、

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

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

今回は、

こちらの設定情報を、

process.env.xxxxx

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

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

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

リンクをメモ。

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アプリ自体の再起動もお忘れなく。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

ピックアップ

おすすめ記事