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

ピックアップ

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

おすすめ書籍

スポンサー

人気記事

おすすめ記事