Nextjs 环境变量始终未定义

Question

我的项目设置是这样的：

project-ci (only docker)
  nextjs
  backend

Staging 和 Production 是一样的，所以我只传入docker-compose.yml这个参数的 staging 文件（两个环境都是先用这些命令构建的npm run build，然后是npm run start）

args:
    NEXT_PUBLIC_URL: arbitrary_value

在Dockerfilenextjs 中放置这些命令

ARG NEXT_PUBLIC_URL
ENV NEXT_PUBLIC_URL=$NEXT_PUBLIC_URL

然后可以在 nextjs 中使用process.env.NEXT_PUBLIC_URL. 到目前为止，如果我尝试console.log(process.env.NEXT_PUBLIC_URL)在index.js值始终是undefined. 任何想法出了什么问题，也检查了文档，但结果仍然是undefined

https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration

https://nextjs.org/docs/api-reference/next.config.js/environment-variables

Answer 1

您可以env使用公共运行时配置属性访问变量：

下一个.config.js

module.exports = {
    publicRuntimeConfig: {
      NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
    }
};

然后：

import getConfig from "next/config";
const { publicRuntimeConfig } = getConfig();
console.log(publicRuntimeConfig.NEXT_PUBLIC_URL);

如果它不起作用，请确保在 docker 容器内创建了 env 变量

Answer 2

虽然 NextJs 有很多优点，但这是我发现的一个缺点。由于其功能，Advanced Static Optimization（https://nextjs.org/docs/advanced-features/automatic-static-optimization）环境变量在构建时转换为其值。他们的网站上没有很好地记录这一点，但经过大量测试后我找到了解决方案。

因此，您必须告诉您的 docker 映像，当它启动之前，npm run build它将npm run start消耗 docker 映像中当前的环境变量，并使用您想要的值将它们优化到构建中。

干杯。