在 Next.js 应用中，环境变量是一个极为有用的工具。通过它，我们可以根据不同的情况，配置不同的选项，将应用中需要使用的常量提取出来，方便我们在不同的部署环境中统一管理。本文将带领读者深入了解 Next.js 中如何配置环境变量。
什么是环境变量？
环境变量是指在操作系统中存储的一个值，它通常由操作系统或其它程序设置，并可在当前会话或后续会话中使用。环境变量通常用于存储与操作系统或其他应用的交互相关的信息，如路径、数据库连接方式、调试标志等。它们可以用于自动化部署，以保证应用在不同的系统或部署环境中始终能够正确地运行。
Next.js 中的环境变量配置
在 Next.js 应用中，我们可以利用 next.config.js 文件中的 env 属性去配置环境变量。该文件是一个 Javascript 模块，可以用来覆盖默认的配置选项。
// next.config.js 文件
module.exports = {
env: {
customKey: 'customValue',
},
};在上述示例中，我们定义了一个名为 customKey 的环境变量，并将其值设置为 customValue。这样，在应用的任何位置，我们都可以通过 process.env.customKey 访问该环境变量。
在环境变量被定义之后，我们就可以通过环境变量来执行不同的操作，以适应不同的部署环境。
if (process.env.NODE_ENV !== 'production') {
console.log('开发环境');
} else {
console.log('生产环境');
}在上述示例中，我们利用 NODE_ENV 环境变量来判断应用当前所处的部署环境，以便根据不同的环境执行不同的操作。
配置多个环境变量
在 Next.js 应用中，我们可以配置多个环境变量。只需要在 env 对象中添加需要的环境变量即可。需要注意的是，环境变量中的名字必须以 NEXT_PUBLIC_ 开头，否则它们将无法在客户端代码中获取到。
// next.config.js 文件
module.exports = {
env: {
NEXT_PUBLIC_API_URL: 'https://api.example.com',
NEXT_PUBLIC_API_GATEWAY_URL: 'https://gateway.example.com',
},
};在上述示例中，我们定义了两个环境变量，分别为 NEXT_PUBLIC_API_URL 和 NEXT_PUBLIC_API_GATEWAY_URL。
在客户端代码中读取环境变量
我们可以在客户端代码中读取到以 NEXT_PUBLIC_ 开头的环境变量，也就是我们在上一节中提到的必须具有该前缀的环境变量。
// 通过 process.env.NEXT_PUBLIC_API_URL 获取环境变量 console.log(process.env.NEXT_PUBLIC_API_URL);
配置私密环境变量
有些情况下，我们需要在应用中使用某些私密的环境变量，比如数据库密码、加密密钥等。这时，我们可以使用 .env 文件来存储这些敏感信息。.env 文件可以被放在应用的根目录下，并且不会被提交到代码仓库中。
在 Next.js 中，我们应该将 .env 文件的内容放在 next.config.js 中的 env 属性中，以便使用。
// next.config.js 文件
module.exports = {
env: {
DB_PASSWORD: process.env.MY_DB_PASSWORD,
},
};在上述示例中，我们通过 process.env.MY_DB_PASSWORD 获取敏感信息，并将其赋值给 DB_PASSWORD 环境变量。这样，在应用的任何位置，我们都可以通过 process.env.DB_PASSWORD 访问该敏感信息了。
需要注意的是，在使用私密环境变量时，我们应该注意安全问题，比如避免在代码库中泄漏这些敏感信息。
结论
通过本文的学习，我们了解到了 Next.js 中环境变量的配置方法。环境变量是一种非常有用的工具，可以用于存储应用中需要用到的常量数据，并可以根据不同的部署环境，配置不同的选项，方便我们在不同的环境中进行开发和部署。不过，在使用环境变量时，我们需要注意安全问题，比如避免在代码库中泄漏私密的环境变量信息，以保证应用的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ed9c42bc9e1890c5e234e7