如何在React/Next.js中检测用户是否通过二维码跳转访问？

1. 给二维码链接添加专属URL参数（最可靠方案） #

生成二维码时，为目标链接附加一个唯一标识参数，比如 ?source=qr。之后在Next.js中检测该参数即可判断用户是否来自扫码跳转。

客户端组件检测

使用Next.js的useSearchParams钩子读取参数：

'use client';
import { useSearchParams } from 'next/navigation';

export default function Home() {
  const searchParams = useSearchParams();
  const isFromQR = searchParams.get('source') === 'qr';

  if (isFromQR) {
    // 执行扫码专属逻辑：比如展示扫码福利弹窗、记录访问来源等
    console.log('用户通过二维码访问');
  }

  return <div>首页内容</div>;
}

服务器组件/API路由检测

直接从请求参数中读取标识：

// 服务器组件示例
export default function Home({ searchParams }) {
  const isFromQR = searchParams?.source === 'qr';

  return <div>{isFromQR ? '来自二维码渠道' : '普通访问'}</div>;
}

// API路由示例
export async function GET(request) {
  const { searchParams } = new URL(request.url);
  const isFromQR = searchParams.get('source') === 'qr';
  return Response.json({ isFromQR });
}

2. 利用Referer请求头辅助判断（补充方案） #

如果你的二维码仅从特定页面生成（比如官网的二维码生成页），可以通过检测请求的Referer头辅助判断，但该方法不稳定——部分浏览器会屏蔽Referer，直接扫码也可能无Referer信息。

// 服务器组件中读取请求头
export async function generateMetadata({ headers }) {
  const referer = headers.get('referer');
  let isFromQR = false;
  // 假设二维码生成页路径为 /qr-generator
  if (referer?.includes('/qr-generator')) {
    isFromQR = true;
  }
  // 后续逻辑处理
}

3. 结合本地存储实现持续识别 #

如果需要在用户后续访问中保留“来自二维码”的标识，可以在首次检测到扫码来源后，用localStorage存储标记：

'use client';
import { useSearchParams, useEffect } from 'next/navigation';

export default function Home() {
  const searchParams = useSearchParams();
  const isFromQR = searchParams.get('source') === 'qr';

  useEffect(() => {
    if (isFromQR) {
      localStorage.setItem('visitedFromQR', 'true');
    }
  }, [isFromQR]);

  // 其他页面可读取该标识
  const visitedFromQR = localStorage.getItem('visitedFromQR') === 'true';

  return <div>{visitedFromQR ? '曾通过二维码访问' : '普通访问'}</div>;
}

注意事项 #

• 优先采用URL参数方案，不受浏览器限制，稳定性最高；
• Referer头仅作为补充判断，不能单独依赖；
• 若需统计扫码访问数据，可将source=qr参数同步到埋点接口或分析工具中。

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