Next.js v13（pages目录）如何在运行时向响应头注入动态值？

由于Next.js v13中serverRuntimeConfig已不再被官方推荐且可能失效，你可以通过以下几种方式实现运行时响应头注入：

1. 页面级注入：使用getServerSideProps #

如果仅需在特定页面添加响应头，可在页面的getServerSideProps方法中处理——该方法在每次请求时于服务器端运行，能获取运行时动态值：

// pages/your-target-page.js
export async function getServerSideProps({ res }) {
  // 模拟获取运行时动态值（可替换为API请求、数据库查询等逻辑）
  const dynamicRuntimeValue = await fetch('https://your-api/runtime-data').then(res => res.text());

  // 设置响应头
  res.setHeader('X-Custom-Runtime-Header', dynamicRuntimeValue);

  return { props: {} };
}

export default function TargetPage() {
  return <div>页面内容</div>;
}

2. 全局页面注入：自定义_document组件 #

若要为所有页面统一添加响应头，可通过自定义_document组件的getInitialProps方法实现——该方法仅在服务器端渲染页面时执行：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class CustomDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);

    // 获取运行时动态值
    const globalRuntimeValue = await fetch('https://your-api/global-runtime-data').then(res => res.text());

    // 全局设置响应头
    ctx.res.setHeader('X-Global-Runtime-Header', globalRuntimeValue);

    return initialProps;
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default CustomDocument;

3. 全路由注入：使用Next.js中间件 #

如果需要为所有请求（包括页面、API路由、静态资源等）添加响应头，推荐使用Next.js中间件——它会在请求到达目标路由前拦截处理：

// middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  // 获取运行时动态值
  const runtimeValue = await fetch('https://your-api/all-runtime-data').then(res => res.text());

  // 克隆响应并添加自定义头
  const response = NextResponse.next();
  response.headers.set('X-All-Routes-Runtime-Header', runtimeValue);

  return response;
}

// 配置中间件作用的路由范围（此处为所有路由）
export const config = {
  matcher: '/:path*',
};

注意事项 #

• 运行时值的获取逻辑需确保性能，避免因耗时请求拖慢响应速度；
• 若使用环境变量存储运行时配置，需使用运行时环境变量（以NEXT_PUBLIC_开头的变量会暴露给客户端，非前缀变量仅在服务器端可用）。

内容的提问来源于stack exchange，提问作者Gajus