问NextJS -如何获得运行时环境变量

EN

您可能需要查看反应env，它就是这样做的。

我们的想法是，react env将为您生成一个带有环境变量的__ENV.js JS文件，然后您可以通过窗口或env助手在客户端访问该文件，例如：

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

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

ENTRYPOINT yarn react-env --env APP_ENV

我将扩展@gyum的答案，因为react-env文档并不是最新的，有几件事情需要一些时间才能弄清楚。

Next.js版本：12.2.5

套餐

在Next.js回购中使用了两个软件包：react-env和@beam-australia/react-env。我不知道前者的目的是什么，我用的是后者。

“同构”

react-env声称它是同构的，但我无法设法使它在服务器端工作。下面是对.env文件的更改

REGULAR_VAR=VALUE
NEXT_PUBLIC_REGULAR_VAR=$REGULAR_VAR

我在服务器和客户端上都使用了一些变量，因此要使其正常工作：

• REGULAR_VAR在服务器上使用，在.env文件中管理。
• NEXT_PUBLIC_REGULAR_VAR在客户机上使用，如：env('REGULAR_VAR') (注意:删除了NEXT_PUBLIC前缀)。在__ENV.js文件中管理

使用包

若要在__ENV.js中使用Next.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是客户端env的默认设置。
• node server.js：或next dev或任何其他命令来启动该项目

Docker

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

RUN yarn build

至

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

在这里，我添加了--path .env.production来使用production。

结论

就这样!现在您可以在__ENV.js中更改客户端env，重新启动生产服务器，然后应用新的值。

您可以：

1. 为不同的环境建立相同的形象
2. 对不同的环境使用不同的环境变量。
3. 有许多方法可以为不同的环境设置环境变量。

https://nextjs.org/docs/basic-features/environment-variables