Next.js 13.4中如何在app目录修改和添加查询字符串？

在App Router中修改查询参数的方式和Pages Router有所不同，主要分为客户端组件和服务器组件两种场景：

一、客户端组件中修改 #

客户端组件需要先声明'use client'指令，然后使用next/navigation提供的useRouter和useSearchParams来操作：

'use client';

import { useRouter, useSearchParams } from 'next/navigation';

export default function PaginationBtn() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const goToNextPage = (currentPage) => {
    // 基于现有查询参数创建新的URLSearchParams实例
    const newSearchParams = new URLSearchParams(searchParams);
    // 更新page参数（这里计算新页码）
    newSearchParams.set('page', (currentPage + 1).toString());
    
    // 用push添加历史记录，replace则替换当前历史记录
    router.push(`?${newSearchParams.toString()}`);
  };

  return (
    <button onClick={() => goToNextPage(Number(searchParams.get('page')) || 0)}>
      下一页
    </button>
  );
}

这种方式会保留原有所有查询参数，仅更新指定的page参数，和你在Pages Router中的逻辑一致，但通过URLSearchParams操作更规范，避免解构遗漏参数。

二、服务器组件中修改 #

服务器组件无法使用客户端hooks，需要通过redirect函数结合searchParams props来实现：

import { redirect } from 'next/navigation';

export default async function ServerPage({ searchParams }) {
  // 模拟需要更新页码的场景
  const shouldUpdatePage = true;
  if (shouldUpdatePage) {
    const newSearchParams = new URLSearchParams(searchParams);
    newSearchParams.set('page', '3'); // 设置目标页码
    redirect(`?${newSearchParams.toString()}`);
  }

  return <div>当前页面内容</div>;
}

服务器组件会自动接收searchParams props，通过它可以获取当前URL的查询参数，处理后用redirect完成跳转并更新URL。

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