在NX工作区中如何将环境变量传递到Next.js客户端侧？

1. 修正环境变量文件命名 #

NX 遵循 DotEnv 标准加载规则，默认不会识别命名为.local.env的文件，请将文件名改为.env.local，放到/apps/myproject/目录下即可。

2. 修正Next.js配置文件后缀 #

当前你使用的next.config.tsx后缀错误，Next.js 配置文件仅支持next.config.js/next.config.ts两种命名，去掉后缀的x，将文件重命名为next.config.js即可，NX会自动识别该配置文件。

3. （可选）移除冗余的publicRuntimeConfig配置 #

由于你已经使用了NEXT_PUBLIC_前缀的环境变量，Next.js 原生支持客户端直接读取该类变量，不需要额外在publicRuntimeConfig中声明。你可以直接在客户端代码中直接取值：

// 客户端代码可直接读取，无需引入next/config
console.log(process.env.NEXT_PUBLIC_PROJECT)

4. 确认NX项目配置（若以上步骤仍无效） #

打开/apps/myproject/project.json文件，检查targets -> serve和targets -> build的配置，确保没有自定义的nextConfigPath指向错误路径，默认不需要配置该字段，NX会自动读取app目录下的next.config文件。

验证方式：你可以在next.config.js中加一行console.log('config loaded', process.env.NEXT_PUBLIC_PROJECT)，执行nx serve myproject时如果终端打印了对应日志，说明配置文件已正确加载。

修改完成后重启nx serve服务即可生效。

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