Next.js 12（React技术栈）无法读取环境变量，process.env为undefined

• Next.js 为了避免敏感环境变量泄露到浏览器端，不会将完整的process.env对象暴露给客户端运行时，只有名称带NEXT_PUBLIC_前缀的变量才允许被注入到客户端代码中。
• 客户端代码构建阶段，Next.js 只会静态替换代码中出现的process.env.NEXT_PUBLIC_XXX字面量为对应变量值，不会保留整个process.env对象的引用，因此直接打印process.env会返回undefined。

直接打印你配置的具体环境变量即可，不需要打印整个process.env对象：

console.log('###ENV', process.env.NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE)

执行后会正常输出你配置的"public_development_variable"值。

• 不带NEXT_PUBLIC_前缀的环境变量仅能在服务端代码中访问，客户端访问会返回undefined。
• 修改.env.local文件后必须重启开发服务，新的配置才会生效。

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