如何在Next.js客户端获取.env变量且不暴露密钥

• 核心思路：利用Next.js的next.config.js实现安全的客户端环境变量访问——该文件运行在服务端，可读取服务端.env中的变量，同时能将指定的非敏感变量暴露给客户端，避免敏感密钥泄露。

具体步骤： #

1. 配置next.config.js
   在项目根目录的next.config.js中添加env字段，将需要客户端访问的非敏感变量映射进去：

   module.exports = {
     env: {
       // 仅配置非敏感的公开变量，不要放入密钥！
       PUBLIC_APP_TITLE: process.env.PUBLIC_APP_TITLE,
       PUBLIC_API_BASE_URL: process.env.PUBLIC_API_BASE_URL,
     },
   };
   

   注：敏感密钥（如API密钥、数据库密码等）仍保留在服务端的.env中，仅在服务端代码中通过process.env访问，绝不添加到next.config.js的env字段里。

2. 客户端访问变量
   在React组件或客户端代码中，直接通过process.env.XXX调用配置好的变量：

   function HomePage() {
     return (
       <div>
         <h1>{process.env.PUBLIC_APP_TITLE}</h1>
         <p>API地址：{process.env.PUBLIC_API_BASE_URL}</p>
       </div>
     );
   }
   export default HomePage;
   

原理说明 #

next.config.js的env配置会在构建时将指定变量注入客户端代码，但我们仅选择非敏感的公开变量，而敏感密钥始终只在服务端环境中存在，不会被打包到客户端资源里，从而实现安全的变量访问。

内容的提问来源于stack exchange，提问作者gordonturibamwe