根据环境向Next.js响应添加自定义标头

Question

我正试图将X-Robots-Tag标头添加到所有Next.js HTTP响应中，这些响应基于服务器部署到的环境中的东西——无论是环境变量(我的偏好(还是其他任何东西。

我的Next.js应用程序被部署到两个环境：一个是集成测试环境，它使用生产Next.js构建(NODE_ENV="production"(，但连接到非生产服务，另一个是为用户流量提供服务的实际生产环境。我只想将标题添加到集成测试环境中。

我已经尝试过在next.config.js的headers()中基于process.env.INTEGRATIONTESTENV有条件地添加头，但任何像process.env.XYZ这样的env-var似乎都是在构建时评估的，而不是在运行时。例如，即使INTEGRATION_TEST_ENV环境变量设置为字符串"，这也不起作用；真"；在服务器上：

headers() {
if (process.env.INTEGRATION_TEST_ENV === "true") {
console.log("This code will never be run. The condition never evaluates to true, despite the runtime env var actually being set to 'true'.")
return [
{
source: "/:path*",
headers: [
{
key: "X-Robots-Tag",
value: "none",
},
],
},
]
}
},

我也不能使用next.config.js的阶段，因为我的集成测试和；实际生产"；正在运行生产构建和生产服务器。

定制服务器可能会解决这个问题，但这似乎有些过头了，尤其是在失去自动静态优化的情况下。

有没有任何方法可以基于运行时环境变量添加标头？

Answer 1

非getServerSideProps(context)选项是使用_middleware页面：

// pages/_middleware.js
import { NextResponse } from "next/server";
export function middleware() {
const res = NextResponse.next();
// `process.env` evaluated at build time
if (process.env.INTEGRATION_TEST_ENV === "true") {
res.headers.set("X-Robots-Tag", "none");
}
return res;
}

我不确定您是否只编译一次，然后每个部署目标都会得到相同的捆绑包(因此环境变量会被"烘焙"(，但如果您能找到解决方法，这可能会奏效。

还有前面评论中提到的另一种方法：

export default function Home() {
return "Hello, world!";
}
// automatic static optimization no longer applies 
export function getServerSideProps(context) {
if (process.env.INTEGRATION_TEST_ENV === "true") {
context.res.setHeader("X-Robots-Tag", "none");
}
return {
props: {},
};
}