如何在Next.js的getServerSideProps中检测软导航请求

在Next.js里，客户端通过next/link或router.push发起的软导航，会向服务器发送带有特定标识的请求，我们可以通过请求头来精准判断请求来源：

• 核心判断标识：x-nextjs-data 请求头
  软导航时，客户端会自动在请求中添加x-nextjs-data头，而首次页面加载（硬刷新、直接输入URL访问）的请求不会包含这个头。

• 辅助验证：accept 请求头
  软导航请求的accept头会包含application/json（客户端期望返回JSON格式数据）；首次加载的请求accept头通常以text/html为主，可结合这个字段做双重验证。

代码实现示例 #

export async function getServerSideProps(context) {
  const { req } = context;
  // 基础判断：检查x-nextjs-data头是否存在
  const isSoftNavigation = !!req.headers['x-nextjs-data'];

  // 可选：结合accept头做更严谨的验证
  // const acceptHeader = req.headers.accept || '';
  // const isSoftNavigation = !!req.headers['x-nextjs-data'] && acceptHeader.includes('application/json');

  return {
    props: {
      isSoftNavigation,
      // 此处添加你的业务数据
    },
  };
}

额外说明 #

• x-nextjs-data头的值是经过编码的路由相关JSON字符串，但我们只需判断它是否存在即可，无需解析内容。
• 该判断逻辑适配Next.js 12及以上版本，属于官方隐含的约定行为，稳定性有保障。

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