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

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

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)
・・・

おすすめ