如何将 env 变量传递到 nx 工作区中的客户端？

Question

我正在 NX 工作区中运行 nextJS 应用程序，我需要访问客户端的环境变量。

/apps/myproject/.local.env

NEXT_PUBLIC_PROJECT=my-super-project

/apps/myproject/next.config.tsx

module.exports = {
  publicRuntimeConfig: {
    PROJECT: process.env.NEXT_PUBLIC_PROJECT
  }
}

在我的 nextJS 应用程序中，我正在尝试几件事：

/apps/myproject/pages/_app.tsx

import nextConfig from 'next/config'
const { publicRuntimeConfig } = nextConfig()
// ...
console.log(process, publicRuntimeConfig)

通过运行应用程序nx serve myproject不会在客户端上给我任何输出，但在服务器端我确实看到了该NEXT_PUBLIC_PROJECT值。我不太确定 nx 是否读取了我的 next.config.js 文件...

Answer 1

对于仍然遇到此问题的任何人。
为了在react项目中加载env变量，需要以下内容：

1. .env在应用程序级别创建文件。
   例子：apps/myReactApp/.env
2. 添加带有前缀NX的变量
   示例：如果您可以将变量称为“APP_NAME” ，则在其中添加“NX_APP_NAME” 。NX 仅加载那些前缀为“NX”的变量。

如果你想为不同的配置加载不同的环境文件，那么你可以这样做：

For QA: `npx env-cmd -f apps/web-client/.env.qa nx run web-client:build:qa`,  
For staging: `npx env-cmd -f apps/web-client/.env.staging nx run web-client:build:staging`, 
NOTE: you need to install env-cmd package 

有关在其文档中加载环境变量的更多信息。