介紹

在部署的時候的通常會用到環境變數的設定，通常會在 package.json 中的script 加上環境變數不過這樣管理上比較不方便，有時候也會寫在本機的環境變速但是如果抽出來些在同一個.env來管理切換，這時候dotenv就是一個很方便的好幫手

安裝 babel套件 plugins

    "babel-plugin-inline-dotenv"
    "babel-plugin-transform-inline-environment-variables"

設定.babelrc

{
  "presets": [
    "next/babel",
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }
}

設定兩個 env檔案

.env 開發環境
.env.production 正式環境

在dotenv之中可以再.env寫上
XXXX=XXXX 這樣就可以吃到 環境變數了 使用上只需要在程式碼上面再加上這一段，如下方的程式碼
config中也可以設定 .env的 path

require('dotenv').config()

總結

在 Next 之中 在使用 dotenv ，如果執行 yarn start也就是執行 next start 就會使用到 .env.production 為production 的變數，反之開發則吃原來的 .env（next start 就是 production)

參考 github

npm dotent 設定
https://www.npmjs.com/package/dotenv

參考 Next.js 官方範例
https://github.com/zeit/next.js/tree/canary/examples/with-dotenv