如何在NextJS中获取referrer值？解决document.referrer无返回问题

原因分析 #

NextJS的客户端路由（next/router）基于SPA导航机制，内部页面切换不会触发浏览器完整刷新，document.referrer仅在首次从外部网站进入应用、直接刷新页面或外部链接跳转时才有值。应用内路由跳转时该属性不会更新，因此无法获取新的来源页面信息。

解决方案 #

1. 手动跟踪内部路由来源 #

通过router.events监听路由变化，手动记录上一个路由地址，替代document.referrer的作用：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function MyComponent() {
  const router = useRouter();
  const [previousPath, setPreviousPath] = useState(null);

  useEffect(() => {
    const handleRouteChangeStart = () => {
      // 记录当前路由作为下一次跳转的来源
      setPreviousPath(router.asPath);
    };

    router.events.on('routeChangeStart', handleRouteChangeStart);

    return () => {
      router.events.off('routeChangeStart', handleRouteChangeStart);
    };
  }, [router]);

  // 优先使用手动记录的内部路径，无则用document.referrer
  return (
    <div>
      来源路径：{previousPath || document.referrer}
    </div>
  );
}

2. 服务端直接获取Referer（SSR/SSG场景） #

在服务端渲染页面时，可通过请求头直接获取referer（注意拼写缺少末尾的r）：

export async function getServerSideProps(context) {
  const referrer = context.req.headers.referer || '';
  return {
    props: { referrer },
  };
}

export default function Page({ referrer }) {
  return <div>服务端获取的来源：{referrer}</div>;
}

3. 注意事项 #

• document.referrer受浏览器隐私策略限制，HTTPS跳转HTTP、隐私模式等场景下可能被清空，返回空字符串。
• 内部路由跳转必须手动维护来源路径，因为NextJS客户端导航不会更新document.referrer。

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