基于环境变量渲染Next.js组件异常：始终显示维护提示

问题根源在于Next.js读取的NEXT_PUBLIC_开头的环境变量全部是字符串类型——哪怕你在.env.local里写的是true或false，实际拿到的是字符串"true"或"false"。而JavaScript中，非空字符串在条件判断里都会被判定为true，所以不管你设什么值，都会显示维护提示。

给你几个可行的解决办法：

• 精确匹配字符串转布尔值（最稳妥）
  修改页面代码里的变量赋值：

  const showMaintenance = process.env.NEXT_PUBLIC_SHOW_MAINTENANCE === 'true'
  

  这样只有当环境变量值为字符串"true"时，才会触发维护提示，设为"false"或其他值时都会显示正常状态。

• 用JSON.parse转换（适合需要多种类型的场景）
  利用JSON解析把字符串转成对应的布尔值，同时处理变量未定义的情况：

  const showMaintenance = JSON.parse(process.env.NEXT_PUBLIC_SHOW_MAINTENANCE ?? 'false')
  

• 别忘了重启开发服务器
  修改.env.local文件后，必须重启Next.js的开发服务，否则新的环境变量不会加载生效，这是很多人容易漏掉的步骤。

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