NextJS 在页面中返回未定义的环境变量

Question

我试图在我的一个页面中获取我的环境变量，但它总是返回未定义。我访问 api 文件夹中的变量没有问题，但在 pages/page.tsx 中它不返回变量。

我使用

访问我的变量

const SECRET = process.env.SECRET 来自我的 .env 文件。

我该如何解决这个问题？

Answer 1

我相信实现您正在尝试执行的操作的首选方法是在服务器端的 getServerSideProps()/getStaticProps() 方法中使用 env 变量。这应该可以按预期工作，没有任何技巧。

但是如果你想访问客户端上的环境变量，你必须在你的变量前面加上 NEXT_PUBLIC_

请参考官方docs：

<块引用>

默认情况下，所有通过 .env.local 加载的环境变量仅在 Node.js 环境中可用，这意味着它们不会暴露给浏览器。

为了向浏览器公开变量，您必须在变量前加上 NEXT_PUBLIC_。例如：

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk