如何隐藏_next/static/chunks中暴露的process.env环境变量？

Next.js中环境变量的暴露与否，核心取决于变量的前缀和你引用它的代码执行环境——以下是具体的解决方法：

1. 严格区分服务端与客户端环境变量 #

• 敏感环境变量绝对不要在客户端执行的代码中直接引用，比如组件的render逻辑、useEffect钩子这类会在浏览器中运行的代码段。把这些变量只放在服务端专属代码里：
  • pages/api/下的API路由文件（全服务端运行）
  • getServerSideProps、getStaticProps这类服务端数据获取函数
• 举个实际场景：如果需要用敏感密钥调用第三方接口，不要在客户端直接发起请求，而是通过自建的API路由做中转。客户端只请求你的API路由，不会接触到敏感变量：

  // pages/api/fetch-data.js
  export default async function handler(req, res) {
    // 这里的代码在服务端运行，变量不会被打包到客户端chunk
    const secretKey = process.env.SECRET_API_KEY;
    const response = await fetch(`https://third-party-api.com/data?key=${secretKey}`);
    const data = await response.json();
    res.status(200).json(data);
  }
  

2. 遵循Next.js环境变量前缀规则 #

• Next.js官方规定：只有带NEXT_PUBLIC_前缀的环境变量会被暴露给客户端。不带这个前缀的变量，Webpack默认只会在服务端代码中保留，不会打包到客户端chunk。
• 错误示例（会导致变量暴露）：

  // 客户端组件中直接引用无前缀变量
  const apiUrl = process.env.API_BASE_URL;
  

• 非敏感变量要给客户端用？加前缀即可：

  // .env文件
  NEXT_PUBLIC_API_BASE_URL=https://example.com/api
  

3. 排查代码中的变量引用路径 #

• 检查你的index.js，确认是否存在间接引用敏感变量的情况：比如把process.env.SECRET_KEY作为props传递给客户端组件，或者在useEffect中调用它。只要代码路径能到达客户端，Webpack就会把变量打包进去。
• 正确的做法是在服务端完成敏感逻辑，只把结果传给客户端：

  // pages/index.js
  export async function getServerSideProps() {
    // 服务端执行敏感逻辑
    const secretData = await fetch(`https://api.example.com/secure?key=${process.env.SECRET_KEY}`);
    const parsedData = await secretData.json();
    // 只把处理后的数据传给客户端组件
    return { props: { parsedData } };
  }
  
  export default function Home({ parsedData }) {
    return <div>{JSON.stringify(parsedData)}</div>;
  }
  

4. 清理缓存重新构建 #

如果之前错误引用导致变量已经被打包到chunk中，先删除.next文件夹和node_modules/.cache目录，再执行npm run build，避免旧打包缓存残留。

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