Next.js 是一个基于 React 的 SSR 框架，同时具有静态站点生成 (SSG) 的功能。
在实际开发中，我们经常需要根据不同的环境配置不同的参数，如 API 地址、域名、密钥等，而不希望这些敏感信息暴露在代码中。为此，我们可以使用环境变量来管理这些参数的值。
本文将介绍在 Next.js 中如何使用环境变量，并提供示例代码。
1. 设置环境变量
Next.js 可以通过环境变量在运行时动态地加载不同的配置文件。
在 Node.js 中，可以通过 process.env 来获取环境变量的值。在 Next.js 中，我们可以在 .env.local 文件中定义环境变量，这些变量将在开发环境中生效。在生产环境中，我们可以通过 CI/CD 工具来设置环境变量。
在根目录下创建 .env.local 文件，并定义环境变量：
---------------------------------
这里我们定义了一个名为 API_URL 的环境变量，值为 http://localhost:8080/api。
从安全角度考虑，我们应该避免在 .env.local 文件中存储敏感信息，而应该将它们储存在 CI/CD 工具中。
2. 使用环境变量
在 Next.js 中使用环境变量很简单，只需要在代码中使用 process.env 来获取环境变量的值即可。例如，在调用 API 时，我们可以这样写：
------------------------- - --------- --------- -- ----------- ---------- -- ------------------ ---------- -- -------------------
这里我们通过 process.env.API_URL 获取 API 地址，并拼接上 /users 来请求用户信息。
3. 高级用法
有些时候，我们可能需要根据环境变量来加载不同的配置文件。例如，我们在开发环境中使用的配置文件和生产环境中使用的配置文件可能不一样。
在 Next.js 中，我们可以定义多个 .env 文件，例如 .env.development 和 .env.production。在开发环境中，Next.js 会自动加载 .env.development 文件；在生产环境中，会自动加载 .env.production 文件。
我们可以在这些文件中定义不同的环境变量，例如：
- ---------------- ---------------------------------
- --------------- -------------------------------
在代码中，我们可以根据 process.env.NODE_ENV 的值来判断当前是开发环境还是生产环境：
-- -------------------- --- ------- - ----------------- -- - ---------- ------------- - ---- - ----------------- -- - ----------- ------------- -
当 NODE_ENV 的值为 production 时，表示当前是生产环境。此外，我们还可以自定义环境变量，例如 IS_PROD，用来判断当前是否是生产环境。
4. 总结
本文介绍了在 Next.js 中如何使用环境变量来管理参数，并提供了示例代码。学习了本文后，你可以更加高效地管理配置参数，提高代码可读性和可维护性。
5. 参考资料
- Next.js 文档: https://nextjs.org/docs/#environment-variables
- Node.js 文档: https://nodejs.org/api/process.html#process_process_env
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648ac88d48841e98948f4cc4