Next.js components组件无法访问.env.local环境变量如何解决

根因说明 #

该问题是Next.js框架的默认环境变量隔离机制导致的：未加特殊前缀的环境变量仅允许在服务端执行的代码中读取（比如pages目录下的getStaticProps、getServerSideProps、API路由等服务端逻辑），客户端侧执行的代码（包括所有组件的渲染逻辑、前端事件回调等）默认无权读取，和文件存放在pages还是components目录无直接关联。

可选解决方案 #

方案1：添加公开环境变量前缀（最常用） #

• 所有需要在客户端侧（包括components目录组件）访问的非敏感环境变量，名称前统一添加NEXT_PUBLIC_前缀，例如原变量名MOVIE_API_URL修改为NEXT_PUBLIC_MOVIE_API_URL
• 修改.env.local文件后重启开发服务，之后在任意前端代码中都可以通过process.env.NEXT_PUBLIC_MOVIE_API_URL读取对应值

注意：添加NEXT_PUBLIC_前缀的变量会被打包到公开的客户端代码中，禁止存放密钥、凭证等敏感信息。

方案2：服务端读取后通过props透传 #

如果环境变量属于敏感内容，不能暴露给客户端，可以通过服务端读取+props传递的方式实现：

1. 在pages目录的页面文件中，通过服务端生命周期函数读取环境变量，随props返回：

// pages/index.js 示例
export async function getStaticProps() {
  return {
    props: {
      movieApiUrl: process.env.MOVIE_API_URL
    }
  }
}

2. 在页面组件中将拿到的movieApiUrl通过props传递给需要调用接口的components组件，变量较多时也可以存入React Context做全局共享，避免逐层透传。

方案3：手动配置环境变量暴露规则（不推荐） #

你也可以修改项目根目录的next.config.js配置，手动指定要暴露给客户端的环境变量：

// next.config.js 示例
module.exports = {
  env: {
    MOVIE_API_URL: process.env.MOVIE_API_URL
  }
}

该方式会强制将指定变量全部打包到客户端代码，敏感信息泄露风险较高，非特殊情况优先选择前两种方案。

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