env

自 Next.js 9.4 釋出以來，我們現在擁有更直觀、更符合人體工程學的方式來新增環境變數。快來試試吧！

須知：以這種方式指定的環境變數將始終包含在 JavaScript 包中，只有在透過環境或 .env 檔案指定環境變數時，在環境變數名稱前加上 NEXT_PUBLIC_ 才會生效。

要將環境變數新增到 JavaScript 包中，請開啟 next.config.js 並新增 env 配置

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

現在您可以在程式碼中訪問 process.env.customKey。例如

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}
 
export default Page

Next.js 會在構建時將 process.env.customKey 替換為 'my-value'。由於 webpack DefinePlugin 的性質，嘗試解構 process.env 變數將不起作用。

例如，以下行

return <h1>The value of customKey is: {process.env.customKey}</h1>

最終會變成

return <h1>The value of customKey is: {'my-value'}</h1>