[Next.js] 使用環境變數的簡單方法

管理環境變數是建構一個可擴展並可維護的Next.js應用程式的關鍵方面。本文探討如何有效利用環境變數，包括process.env.NODE_ENV，.env檔案，NEXT_PUBLIC_前綴等等。

process.env.NODE_ENV

在Next.js中，process.env.NODE_ENV允許您訪問當前的Node.js環境變數。

// 存取 NODE_ENV 變數
const env = process.env.NODE_ENV;
console.log(`環境: ${env}`);
// 輸出: 環境: development

上述代碼存取當前Node環境並列印出來。在大多數情況下，這將是development、production或test其中之一。

.env檔案：定義環境變數

Next.js為不同用途和開發階段的環境變數定義提供了數個.env檔案。以下是每個檔案的概述：

• .env：這是用於定義環境變數的預設檔案。在所有環境中均已加載。
• .env.development：專為development環境而設，此檔案允許您為開發目的設置變數。
• .env.production：使用此檔案來定義production環境中所需的變數。
• .env.test：此檔案存放test環境的環境變數。
• .env.local：.env.local檔案可以在本地級別覆蓋變數，不包括test環境。

優先順序和重疊鍵

在多個.env檔案中定義變數的情況下，Next.js會以特定順序仔細加載這些檔案，以確定應使用哪個值。如果有重疊的鍵，則具有更高優先順序的檔案將覆蓋其他檔案的值。

1. 本地覆蓋：.env.local檔案具有最高的優先順序（1），並允許在本地級別覆蓋變數，測試環境除外。
2. 特定環境檔案：優先順序次之的（2）是像.env.development、.env.production和.env.test這樣的特定環境檔案。它們用於為各自的環境定義變數。
3. 預設檔案：最後，.env檔案具有最低的優先順序（3），用於規定在所有環境中加載的環境變數。

考慮您在.env檔案中具有以下API_URL鍵的定義：

讓我們探討Next.js如何加載這些檔案以確定不同環境中API_URL的值。

在Development環境中

1. 如果.env.local存在並定義了API_URL，則使用該值。
2. 否則，.env.development中的值被使用。
3. 如果.env.development中未定義，則採用.env中的值。

在Production環境中

1. 如果.env.local存在並定義了API_URL，則使用該值。
2. 如果沒有，則取自.env.production的值。
3. 如果在.env.production中未定義，則選擇.env中的值。

在Test環境中

1. 如果.env.local存在並定義了API_URL，則使用該值。
2. 如果沒有，則使用.env.test的值。
3. 如果在.env.test中未定義，則使用.env中的值。

將環境變數打包為瀏覽器

在Next.js中，可以將環境變數打包並公開給瀏覽器，以便客戶端代碼訪問某些配置或設置。當您需要配置客戶端庫或服務時，此功能尤為有用。

然而，必須注意不要將哪些變數暴露給瀏覽器，因為這可能會潛在地導致安全風險。任何敏感信息，例如秘密密鑰或密碼，絕不應包括在可從瀏覽器訪問的變數中。

使用 NEXT_PUBLIC_ 前綴

若要在瀏覽器中揭露環境變數，您可以在變數前加上 NEXT_PUBLIC_ 前綴。例如，若您想將API端點URL公開至瀏覽器，您或許可以在 .env 檔案中定義以下內容

NEXT_PUBLIC_VAR=value

此變數將被內聯於JavaScript包中，並可在客戶端代碼的任何地方使用 process.env.NEXT_PUBLIC_VAR 來訪問。

程式碼範例

以下是一個您可能如何在React元件中使用此變數的簡單範例

// 存取帶有 NEXT_PUBLIC_ 前綴的變數
const publicVar = process.env.NEXT_PUBLIC_VAR;
console.log(`公開變數：${publicVar}`);
// 輸出：公開變數：value

安全考量

如前所述，將環境變數揭露至瀏覽器需要仔細考慮其安全影響。任何帶有 NEXT_PUBLIC_ 前綴的變數都將被包括在客戶端代碼中，並且可以被任何查看您網頁原始碼的人訪問。

切勿使用 NEXT_PUBLIC_ 前綴揭露敏感信息，例如秘密金鑰或個人數據，因為這樣做可能會將此信息暴露給惡意用戶，並對您的應用程序的安全構成重大風險。

在Next.js中管理環境變數對於建立穩健的應用程序至關重要。各種 .env 檔案為特定環境的配置提供了靈活性和控制能力。通過了解這些檔案的優先順序和正確使用方式，您可以提高Next.js項目的效率和可維護性。

常見問答

1. Next.js中的不同 .env 檔案是什麼？
   它們為不同階段定義環境變數：.env 作為預設，.env.development 用於開發，.env.production 用於生產，.env.test 用於測試，以及 .env.local 用於本地覆蓋。
2. 我如何將環境變數揭露給瀏覽器？
   使用 NEXT_PUBLIC_ 前綴。這使其在客戶端代碼中可訪問。
3. 將所有環境變數揭露給瀏覽器是否安全？
   不，避免揭露敏感信息以防止安全風險。
4. 我如何管理不同 .env 檔案之間的重疊鍵？
   Next.js使用檔案的優先順序來確定變數的值。注意這個順序。
5. 我可以為特定環境覆蓋環境變數嗎？
   是的，使用特定的 .env 檔案，如 .env.development 或 .env.production。.env.local 可以在本地覆蓋變數，除非在測試中。