next.js - .env 環境參數

Next.js, react.v17, .env, 環境參數。

主要參考文章

Basic Features: Environment Variables | Next.jsvercel

重點紀錄

next.js環境參數有幾種， .env在 Next.js versions 9.4 以後才支援。另一種next.config.js的方法是舊的，可能仍有用作但不建議使用。

Environment Variable Load Order

Environment variables are looked up in the following places, in order, stopping once the variable is found.

.env檔有幾種型態，載入順序如下：

1. process.env

2. .env.$(NODE_ENV).local

3. .env.local (Not checked when NODE_ENV is test.)

4. .env.$(NODE_ENV)

5. .env

For example, if NODE_ENV is development and you define a variable in both .env.development.local and .env, the value in .env.development.local will be used.

.env內建環境參數

process.env.NODE_ENV
//執行環境 := [development|production]

.env設定內容原則性不公開

不能在browser直接查看環境參數內容，若要則環境參數名稱開頭必需是NEXT_PUBLIC_，如：NEXT_PUBLIC_APP_NAME, NEXT_PUBLIC_APP_VERSION。

.env讀取指令與特性

// 讀取指令必需有『process.env.』，或說需用"全名"才有效。
const ENV_NAME = process.env.ENV_NAME;

// 無法傳遞 reference 
const env = process.env; // 這指令合法但無效。
const ENV_NAME = env.ENV_NAME; //※注意：這指令無效。
const json = JSON.stringify(process.env); //※注意：這指令無效。

關於.env部署正式環境

.env檔在bundle後就找不到明文.env檔可以設定了，也就是在部署正式環境前就要設定好。

.env檔在專案的位置

程式碼紀錄

設定.env環境參數

.env

# 參考說明：Next.js - Environment Variables
# https://nextjs.org/docs/basic-features/environment-variables#

DB_HOST=localhost
DB_PORT=1433
DB_USER=sa
DB_PASS=sa_password
DB_NAME=YourDB
NEXT_PUBLIC_APP_NAME=我是可公開的環境參數
# 環境參數原則上不公開，
# 若要公開則環境參數的名稱開頭必需是NEXT_PUBLIC_*

讀取.env環境參數

index.tsx

/// 特殊函式: 只會在 Server 端執行。
/// will be passed to the page component as props
/// ※下面讀取.env並公開，這不是正式開發時的建議用法因為可能會曝露密秘資料，這只用於測試或除錯。
export async function getServerSideProps(context) {
  return {
    props: {
      env: {
        NODE_ENV: process.env.NODE_ENV, // ※內建參數[production|development]。
        DB_HOST: process.env.DB_HOST,
        DB_PORT: process.env.DB_PORT,
        DB_USER: process.env.DB_USER,
        DB_PASS: process.env.DB_PASS,
        DB_NAME: process.env.DB_NAME,
        NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME
      }
    }
  }
}

EOF