如何在 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]

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

// 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,
  })
  // ...
}

您可以从源中阅读更多内容。

码头工人解决方案

如果上述解决方案不是您要寻找的解决方案，那么您需要的是如何在 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

您可以从源中阅读更多内容。