您可能想看看react-env，它就能做到这一点。
其思想是react-env将为您生成一个包含您的环境变量的__ENV.js JS文件，然后您可以通过窗口或env帮助器在客户端访问该文件，例如：

<small>
  Works in the browser: <b>{env("CRA")}</b>.
</small>

使用Docker时，可以设置一个入口点，在容器启动时生成所需的__ENV.js：

ENTRYPOINT yarn react-env --env APP_ENV

我将详细介绍@gyum-fox的答案，因为react-env文档不是最新的，有几件事需要一些时间来解决。
下一个. js版本：12.2.5个

Package

在react-env Next.js repo中使用了2个 Package ：react-env和@beam-australia/react-env。我不知道前者的用途是什么，我用了后者。
“同构”
react-env声称它是同构的，但是我无法使它在服务器端工作。

REGULAR_VAR=VALUE
NEXT_PUBLIC_REGULAR_VAR=$REGULAR_VAR

我在服务器端和客户端都使用了一些变量，所以要使它工作：

• REGULAR_VAR已在服务器上使用，在.env文件中管理
• NEXT_PUBLIC_REGULAR_VAR在客户端上的使用方式如下：env('REGULAR_VAR')（注：NEXT_PUBLIC前缀已删除）。在__ENV.js文件中管理

使用软件包

要在Next.js中使用__ENV.js文件，请在_document.tsx中放置以下行

<Script src="/__ENV.js" strategy="beforeInteractive" />

注意：虽然__ENV.js位于/public目录中，但在运行时文件将位于根目录中，因为该目录中的每个文件都将位于

正在生成__ENV.js文件

react-env命令只需要生成__ENV.js，因此您可以启动项目：

# like this

npx react-env --prefix NEXT_PUBLIC -- node server.js

# or like this

yarn react-env --prefix NEXT_PUBLIC && node server.js

• --prefix NEXT_PUBLIC：NEXT_PUBLIC是客户端环境变量的默认值
• node server.js：或next dev或任何其他命令来启动项目

坞站

我使用Dockerfile from Vercel example进行部署。若要在容器中生成__ENV.js文件，请更改

RUN yarn build

至

RUN npx react-env --prefix NEXT_PUBLIC --path .env.production -- yarn build

在这里，我添加了--path .env.production以使用生产环境变量。
结论
就是这样！现在你可以在__ENV.js中更改客户端环境变量，重启生产服务器，新的值将被应用。

您可以：
1.为不同环境构建相同映像
1.对不同的环境使用不同的环境变量。
1.有许多方法可以为不同的环境设置环境变量。
https://nextjs.org/docs/basic-features/environment-variables