从 docker-compose.yaml 将 .env 变量添加到客户端组件 NextJS

Question

有没有办法从 docker compose 将 env 变量添加到 NextJS 应用程序，我可以将 .env 变量添加到 Dockerfile（以 NEXT_PUBLIC_ 为前缀）。

我目前正在从 Docker-compose.yaml 文件传递服务器 URL .env 变量，并使用应用程序路由器调用该函数，然后使用该服务器 URL 进行 API 调用，我理想情况下希望从客户端组件。

Answer 1

要在运行时读取环境变量，您需要在客户端挂载组件期间从服务器获取公共配置，并将其存储在上下文或任何状态管理器中。

这是我通常使用的方法：

我删除了所有带有
```
NEXT_PUBLIC_
```
前缀的环境变量，以防止它们在构建期间嵌入到构建中。
我准备了一个可公开的公共运行时环境配置，将其包装在服务器操作（函数）中，并给它一个明确的
```
EXPOSED_
```
前缀。
我为服务器上的运行时环境变量设置了一个秘密环境配置（
```
secretEnv
```
）。
我将这两个配置都包装在
```
envsafe
```
中，以实现运行时验证和类型安全。
我清除了
```
.env.production
```
/
```
.env.development
```
中所有不必要的条目。所有默认值/devDefaults 均通过
```
envsafe
```
处理。
对于
```
next.config.ts
```
，我继续直接从
```
process.env
```
读取（否则，如果我尝试仅从服务器
```
secretEnv
```
读取，linter将会失败）。
服务器上使用的任何可公开环境变量都在
```
secretEnv
```
中重复，以避免进行服务器操作调用并直接使用服务器配置。
在应用程序布局中，我添加了一个上下文提供程序，我从服务器操作中获取公共环境配置并将其存储在上下文中。我使用从服务器传递的
```
ssrRuntimeEnv
```
初始化配置，以避免在水合作用期间闪烁。

确保通过读取动态生成配置目前的运行时环境，而不是返回配置在应用程序构建期间创建的结果。