使用NextJS App Router时，如何在客户端组件中获取referrer值？

方法一：从 Server Component 传递 Props #

Server Component 可正常使用 next/headers 获取 Referrer，再将其作为 props 传给子级的 Client Component。

示例代码：

Server Component（page.tsx） #

import { headers } from 'next/headers';
import ClientComponent from './ClientComponent';

export default function Page() {
  // HTTP 头字段名为 referer（注意少一个字母 r）
  const referrer = headers().get('referer');
  return <ClientComponent referrer={referrer} />;
}

Client Component（ClientComponent.tsx） #

'use client';

interface ClientComponentProps {
  referrer: string | null;
}

export default function ClientComponent({ referrer }: ClientComponentProps) {
  return <div>来源页面：{referrer || '未知'}</div>;
}

方法二：使用浏览器原生 API document.referrer #

Client Component 运行在客户端，可直接调用浏览器提供的 document.referrer 获取来源信息。

示例代码：

'use client';

import { useEffect, useState } from 'react';

export default function ClientComponent() {
  const [referrer, setReferrer] = useState<string | null>(null);

  useEffect(() => {
    // 组件挂载后获取 referrer
    setReferrer(document.referrer);
  }, []);

  return <div>来源页面：{referrer || '未知'}</div>;
}

注意：

• 部分场景下 document.referrer 会返回空值，比如用户直接输入 URL 访问、跨域跳转受浏览器隐私策略限制等。
• 跨域跳转时，返回值可能仅包含来源域名（取决于浏览器设置和服务端的 Referrer-Policy 响应头）。

方法三：通过 API Route 间接获取 #

如果需要从服务端处理 Referrer 逻辑，可创建一个 API Route，在其中用 next/headers 获取值，再由 Client Component 调用该接口获取。

示例代码：

API Route（app/api/referrer/route.ts） #

import { headers } from 'next/headers';
import { NextResponse } from 'next/server';

export async function GET() {
  const referrer = headers().get('referer');
  return NextResponse.json({ referrer });
}

Client Component 调用接口 #

'use client';

import { useEffect, useState } from 'react';

export default function ClientComponent() {
  const [referrer, setReferrer] = useState<string | null>(null);

  useEffect(() => {
    const fetchReferrer = async () => {
      const res = await fetch('/api/referrer');
      const data = await res.json();
      setReferrer(data.referrer);
    };

    fetchReferrer();
  }, []);

  return <div>来源页面：{referrer || '未知'}</div>;
}

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