Add custom headers to Next.js responses based on environment - next.js

Question

I'm trying to add the the X-Robots-Tag header to all Next.js HTTP responses based on something in the environment the server is deployed to -- whether that is an environment variable (my preference) or anything else.
My Next.js application is deployed to two environments: an integration testing environment that uses the production Next.js build (NODE_ENV="production") but is connected to non-prod services, and the actual production environment that serves user traffic. I want to add the header only to the integration testing environment.
I've tried adding the header conditionally based on process.env.INTEGRATIONTESTENV in headers() in next.config.js, but any env var like process.env.XYZ seems to be evaluated at build time, not at runtime. For example, this doesn't work, even though the INTEGRATION_TEST_ENV environment variable is set to the string "true" on the server:
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",
},
],
},
]
}
},
I can't use next.config.js's phases either, since both my integration test and "real production" are running the production build and production server.
A custom server might solve the problem, but it seems like overkill, especially with the loss of automatic static optimization.
Is there any way to add a header based on a runtime environment variable?

Answer 1

A non-getServerSideProps(context) option would be to use a _middleware page:
// 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;
}
I'm not sure if you're just compiling once then each deployment target gets the same bundle (and so the environment variable would be "baked-in"), but if you can find a workaround for that, this could potentially work.
And the other approach mentioned in the comments earlier:
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: {},
};
}