Next.js中getServerSideProps里怎么获取请求头信息？

Mr-秀云提问于 2026-03-10 10:46:18 阅读 4

框架

我在用Next.js做SSR页面，想在getServerSideProps里读取自定义的请求头，比如X-Custom-Header，但不知道怎么拿到req对象。文档里好像提到了context参数，但我试了context.req.headers却报错说req是undefined。

我是在App Router模式下写的，是不是这个方法只适用于Pages Router？如果是的话，在App Router里该怎么在服务端获取请求头呢？

export async function getServerSideProps(context) {
  const customHeader = context.req.headers['x-custom-header'];
  return { props: { customHeader } };
}

服务端渲染

我来解答赞 4 收藏

反馈

1 条解答

UX卫利 Lv1

啊这个问题我也踩过坑。你确实搞混了Pages Router和App Router的用法，现在Next.js 13+默认是App Router，API完全不一样。

在App Router里，你需要在page.js或者layout.js里用async function来替代getServerSideProps。请求头可以直接从headers()方法获取，这是Next.js 13新增的API。

比如你要获取x-custom-header可以这样写：

import { headers } from 'next/headers'



export default async function Page() {

  const headersList = headers()

  const customHeader = headersList.get('x-custom-header')



  return {customHeader}


}

注意几点：
1. headers()只能在服务端组件用，别在客户端组件里调
2. 这个方法返回的是Headers对象，所以要用get方法取值
3. 不用再折腾context参数了，App Router里没这玩意儿

我之前也卡在这好久，后来发现Next.js文档里其实写了，就是藏得比较深...这个新的headers API比原来简洁多了，就是容易和浏览器API搞混。

2026-03-10 11:00