Nextjs环境变量始终未定义

Question

我的项目设置如下：

project-ci (only docker)
  nextjs
  backend

试运行和生产环境是相同的，所以我只传递了试运行参数的docker-compose.yml文件(两个环境都是使用这些命令构建的，首先是npm run build，然后是npm run start)

args:
    NEXT_PUBLIC_URL: arbitrary_value

在nextjs的Dockerfile中放入以下命令

ARG NEXT_PUBLIC_URL
ENV NEXT_PUBLIC_URL=$NEXT_PUBLIC_URL

因此，可以使用process.env.NEXT_PUBLIC_URL在nextjs中访问变量。到目前为止，如果我尝试在index.js中使用console.log(process.env.NEXT_PUBLIC_URL)，则值始终为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变量：

next.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容器内创建环境变量

Answer 2

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

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

干杯。