在 Next.js 项目中，我们常常需要配置一些环境变量，例如 API 地址、Secret Key 等等。为了避免将这些敏感信息暴露到代码库中，我们通常会将这些信息配置到环境变量中。在本文中，我们将介绍如何在 Next.js 项目中使用 dotenv 配置环境变量。
dotenv 是什么？
dotenv 是一个用于读取 .env 文件的 npm 模块。.env 文件通常包含我们在项目中需要配置的环境变量。dotenv 只会将 .env 文件中的变量加载到 process.env 对象中，而不会将它们暴露到系统的全局变量中。
安装 dotenv
在使用 dotenv 之前，我们需要先安装它。在项目根目录下，运行以下命令安装 dotenv：
--- ------- ---------- ------
配置 dotenv
安装完 dotenv 之后，我们需要以下几步操作来完成在 Next.js 项目中的配置。
创建 .env 文件
在项目的根目录下创建一个 .env 文件，并在该文件中添加需要配置的环境变量，例如：
---------------------------------- -------------------------
在 Next.js 配置文件中引入 dotenv
在 Next.js 项目中，我们可以使用 next.config.js 文件来配置 webpack 构建。在 next.config.js 文件中，我们可以通过 webpack 对象来调整 webpack 的配置。我们需要引入 dotenv-webpack 模块，并将其添加到 webpack.plugins 数组中。在 Next.js 中，我们只需要将以下代码添加到 next.config.js 文件中即可：
----- ------ - --------------------------
-------------- - -
-------- ------ -- -
----------------------- ----------
------ -------
-
--当 webpack 构建时，dotenv-webpack 会自动读取 .env 文件并将其中的所有环境变量注入到 process.env 对象中。
在代码中使用环境变量
完成上述操作后，我们可以在代码中使用环境变量了。例如，我们可以在 pages/index.js 文件中使用 API_ROOT 环境变量：
------ ----- ---- --------
----- ---- - -- -- -
------ -
-----
----------- -- -- -------------
------ ---- --- --------------------------
------
--
--
------ ------- -----上述代码中，我们从 process.env 对象中读取了 API_ROOT 环境变量，并将其显示在页面中。
总结
在 Next.js 项目中使用 dotenv 配置环境变量非常简单。通过引入 dotenv-webpack 模块，我们可以将项目中的环境变量加载到 process.env 对象中，并在代码中使用它们。使用 dotenv 可以帮助我们避免将敏感信息暴露到代码库中，提高项目的安全性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65227df495b1f8cacd9fb4d3