Next.js 12.2.2环境变量不生效问题排查及解决

问题场景 #

• 按Next.js官方文档配置环境变量，在next.config.js的env字段中定义了MORALIS_ID和MORALIS_SERVER
• 在MoralisProvider组件中通过process.env.MORALIS_ID、process.env.MORALIS_SERVER调用时，控制台输出undefined，触发ReactMoralisError提示「未提供appId」
• 尝试改用.env文件配置环境变量，问题依然存在

解决步骤 #

直接重启Next.js开发服务器即可解决问题。

原因说明 #

Next.js在启动阶段会缓存环境变量和next.config.js的配置内容，修改这些文件后，服务器不会自动加载新配置，必须重启才能让新的环境变量生效，否则应用会一直使用旧的缓存配置，导致无法读取新增的变量。

额外注意事项 #

• 如果使用.env文件配置客户端需要访问的环境变量，变量名必须以NEXT_PUBLIC_开头（比如NEXT_PUBLIC_MORALIS_ID），Next.js默认仅会将带该前缀的环境变量暴露给客户端组件
• 在next.config.js中配置环境变量的正确格式：

module.exports = {
  env: {
    MORALIS_ID: '你的Moralis应用ID',
    MORALIS_SERVER: '你的Moralis服务器地址'
  }
}

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