如何在 Next.js 中访问系统环境变量？

Question

我创建了一个使用环境变量的 Next.JS 应用程序。我有需要的环境变量作为系统的环境变量（因为它是一个 dockerized nextjs 应用程序）。

# in terminal
echo $NEXT_PUBLIC_KEY_NAME
# >> value of key

但process.env.NEXT_PUBLIC_KEY_NAME 仅在生产模式下运行时在应用程序中未定义。我怎样才能访问它们？我似乎在 Nextjs 的网站或其他任何地方都找不到关于此的任何文档。

Answer 1

NextJS 解决方案

NextJS 内置支持来完成你想要的， 您只需将环境变量放入 根文件夹 中的 .env.local。

除了.env.local，您还可以使用.env、.env.development和.env.production。

.env.local 的示例：

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

在你的情况下，它将变成：

NEXT_PUBLIC_KEY_NAME=[insert_what_you_want]

瞧，您可以从 NextJS 应用程序中使用 process.env. 关键字访问它。

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

您可以从source 了解更多信息。

---

Docker 解决方案

如果上述解决方案不是您要寻找的解决方案，那么您需要的是如何在 Docker 而不是 NextJS 上设置 env 变量。

如果您使用的是 docker-compose 文件：

frontend:
    image: frontend
    build:
      context: .
      dockerfile: Dockerfile
    environment:
      - NEXT_PUBLIC_KEY_NAME=[insert_what_you_want]

如果你运行docker手册，使用-e参数：

docker run -e NEXT_PUBLIC_KEY_NAME=[insert_what_you_want] frontend bash

或在 docker 命令上使用 env 文件：

docker run --env-file ./env.list frontend bash

您可以从source 了解更多信息。