【Next.js】Day 2 – 將環境變數改成設定檔

一開始開發的時候通常都會先 hard code，例如 api、port 的設定等。
但是當開發進入尾聲，這些環境變數就要抽出來用設定檔來處理了，這樣部署的時候才能依照環境吃不同的設定。

只要根目錄新增檔案 .env.local

ENV=local
PORT=3001
NEXT_PUBLIC_API_URL=http://127.0.0.1:22200

這樣就可以在程式裡面用 process.env 抓到設定值

process.env.ENV
process.env.PORT
process.env.NEXT_PUBLIC_API_URL

會注意到有些環境變數帶了前綴 NEXT_PUBLIC_
是因為 Next.js 有分 Server／Client 端，比較敏感的資訊，例如 API Key 就不能在 Client 端抓取。
而需要在 Client 端抓取的環境變數就需要帶前綴 NEXT_PUBLIC_

---

NODE_ENV 有三個預設值，分別為對應這三個檔案

• production
  • 設定抓 .env.production
  • NODE_ENV=production
  • 因為是用於生產環境，所以 log 會必要的才紀錄，還有一些效能上的優化
• development
  • 設定抓 .env.development
  • NODE_ENV=development
  • 會有詳細的 log、Hot Reload 等等方便開發偵錯
• test
  • 設定抓 .env.test
  • NODE_ENV=test

如果沒有指定 NODE_ENV
next dev → NODE_ENV=development
next build → NODE_ENV=production
next start → NODE_ENV=production

---

環境變數是按照這個順序尋找的

1. process.env
2. .env.$(NODE_ENV).local
3. .env.local (Not checked when NODE_ENV is test.)
4. .env.$(NODE_ENV)
5. .env

如果要自訂順序可以這樣做

const dotenv = require('dotenv');
const fs = require('fs');

const envFiles = [
  //env file name
];

envFiles.forEach((file) => {
  if (fs.existsSync(file)) {
    dotenv.config({ path: file });
  }
});

參考資料
https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production