Next.js 13 SSR场景下使用Link保留路径添加查询参数的问题

核心思路 #

由于是SSR（Server Component）场景，无法使用客户端的useRouter，必须在服务器端获取当前路径与现有查询参数，构建出包含新参数的目标URL后，传给Link组件的href属性。

具体实现步骤 #

1. 服务器端获取当前路径与查询参数
   在App Router的Page Server Component中，通过headers() API获取当前请求的完整URL以提取路径，同时通过组件props接收现有查询参数：

import { headers } from 'next/headers';
import Link from 'next/link';

async function Page({ searchParams }) {
  // 获取当前应用的路径
  const headersList = headers();
  const currentUrl = new URL(headersList.get('x-nextjs-url') || headersList.get('referer'));
  const currentPath = currentUrl.pathname;

  // 构建新查询参数：复制现有参数并添加/修改目标参数
  const newSearchParams = new URLSearchParams(searchParams);
  newSearchParams.set('filter', 'active'); // 替换为你需要的参数键值对

  // 拼接最终跳转URL
  const targetHref = newSearchParams.toString() 
    ? `${currentPath}?${newSearchParams.toString()}` 
    : currentPath;

2. 使用Link组件完成跳转
   将构建好的targetHref传入Link的href属性即可：

return (
    <div>
      <Link href={targetHref}>点击追加查询参数</Link>
    </div>
  );
}

export default Page;

关键注意点 #

• 优先用x-nextjs-url header获取当前路径，兼容性更优， fallback到referer是为了覆盖特殊场景；
• URLSearchParams会自动处理参数编码与格式拼接，避免手动拼接导致的错误；
• 若为动态路由页面，也可通过params props获取路由参数手动拼接路径，但headers方式更通用。

内容的提问来源于stack exchange，提问作者Tomás