【Next.js】Day 3 – dotenv + cross-env 載入環境變數

開發的過程我們有分 POC / SIT / UAT / Production 四個環境，依據環境變數的設定，新增各環境設定檔

.env.poc
.env.sit
.env.uat
.env.production

依照上一篇文章的說明，可以知道這些檔案預設並不會被讀取。
我們需要在 dev / build / start 的時候設定要讀取哪個檔案。

總共會安裝兩個 package

• dotenv
  • 將環境變數從 .env 檔案載入到 process.env
• cross-env
  • 使用單一指令設定環境變數

dotenv

安裝 package

npm install dotenv --save

載入設定檔

import dotenv from 'dotenv';

//一:載入 .env
const result = dotenv.config()//預設 path 為 path.resolve(process.cwd(), '.env')
//result.error => 加載錯誤的 key
//result.parsed => 加載成功的 key

//二:指定路徑載入
const result = dotenv.config({ path: '/.env.poc' })

//三：指定路徑載入並指定載入順序
const result = dotenv.config({ path: ['/.env.local', '/.env.poc'] })

設定編碼

const result = dotenv.config({ encoding: 'utf8' })//預設為 utf8

設定偵錯模式

const result = dotenv.config({ debug: true })//預設為 false

cross-env

安裝 package

npm install --save-dev cross-env

//package.json
{
  "scripts": {
    "dev": "cross-env ENV=poc next dev"
  }
}

---

結合以上兩個 package，程式碼修改如下，就可以依照環境載入不同的設定檔了

import dotenv from 'dotenv';

const envFile = `.env.${process.env.ENV}`;
const result = dotenv.config({ path: `/${envFile}` });

參考資料
https://www.npmjs.com/package/dotenv
https://www.npmjs.com/package/cross-env