Next.js 项目中如何使用 dotenv 配置环境变量？-JavaScript中文网-JavaScript教程资源分享门户

在 Next.js 项目中，我们常常需要配置一些环境变量，例如 API 地址、Secret Key 等等。为了避免将这些敏感信息暴露到代码库中，我们通常会将这些信息配置到环境变量中。在本文中，我们将介绍如何在 Next.js 项目中使用 dotenv 配置环境变量。

dotenv 是什么？

dotenv 是一个用于读取 .env 文件的 npm 模块。.env 文件通常包含我们在项目中需要配置的环境变量。dotenv 只会将 .env 文件中的变量加载到 process.env 对象中，而不会将它们暴露到系统的全局变量中。

安装 dotenv

在使用 dotenv 之前，我们需要先安装它。在项目根目录下，运行以下命令安装 dotenv：

npm install --save-dev dotenv

配置 dotenv

安装完 dotenv 之后，我们需要以下几步操作来完成在 Next.js 项目中的配置。

创建 `.env` 文件

在项目的根目录下创建一个 .env 文件，并在该文件中添加需要配置的环境变量，例如：

API_ROOT=http://localhost:3000/api
SECRET_KEY=supersecretkey

在 Next.js 配置文件中引入 dotenv

在 Next.js 项目中，我们可以使用 next.config.js 文件来配置 webpack 构建。在 next.config.js 文件中，我们可以通过 webpack 对象来调整 webpack 的配置。我们需要引入 dotenv-webpack 模块，并将其添加到 webpack.plugins 数组中。在 Next.js 中，我们只需要将以下代码添加到 next.config.js 文件中即可：

const Dotenv = require('dotenv-webpack');

module.exports = {
  webpack: config => {
    config.plugins.push(new Dotenv());
    return config;
  }
};

当 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

Next.js 项目中如何使用 dotenv 配置环境变量？