Next.jsで複数のenvファイルを使って複数環境に対応する

2020.11.07

下準備
next.config.jsの編集
パッケージ導入

Next.jsで$yarn run dev（next） した際に、 .env.local と .env.staging を使い分けられるようにします。

下準備

それぞれの.envに値を追加しておきます

.env.local

API_URL=http://localhost:4000

.env.staging

API_URL=https://hogehoge.com

next.config.jsの編集

nextのプロジェクト内で環境変数を使えるよう「next.config.js」を編集しておきます。

next.config.js

module.exports = {
  env: {
    API_URL: process.env.API_URL,
  },
}

パッケージ導入

それぞれのenvを npm-scripts実行時に切り替えられるよう env-cmd というパッケージを追加します

$ yarn add -D env-cmd

package.jsonを編集します

package.json

"scripts": {
  "dev:local": "env-cmd -f .env.local next",
  "dev:stg": "env-cmd -f .env.staging next"
},

後はNext.jsで使用するコード内で process.env.API_URL とすれば、 $yarn run dev:local $yarn run dev:stg で環境に応じて使い分けることが出来ます。

const baseUrl = process.env.API_URL
const url = `${baseUrl}/v1/users`
// yarn run dev:local => http://localhost:4000/v1/users
// yarn run dev:stg => https://hogehoge.com/v1/users
 
const res = await axios.get(url)
・・・