Next.js v12.2.5：如何在Middleware中添加查询参数并传递给服务端路由？

使用Next.js v12.2.5版本，尝试通过Next.js Link的URL对象方式添加查询参数但未生效，想了解是否可以在Middleware中添加查询参数，并让服务端能获取到该参数（原计划用useRouter()）。

给出的Middleware示例代码如下：

// middleware.ts (conceptual example)
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  return NextResponse.rewrite({
    pathname: '/',
    query: { requiredParam: 'something' }, // add requiredParam inside middleware
  });
}

export const config = {
  matcher: ['/'],
};

1. 修正Middleware的写法
   你的示例代码无法正确添加查询参数，因为NextResponse.rewrite在v12.2.5中需要接收完整的URL实例（而非仅pathname和query对象）。正确做法是基于当前请求的URL创建新实例，修改查询参数后再进行重写：

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  // 基于当前请求URL创建新实例
  const url = new URL(request.url);
  // 添加或修改查询参数
  url.searchParams.set('requiredParam', 'something');
  // 重写到包含查询参数的URL
  return NextResponse.rewrite(url);
}

export const config = {
  matcher: ['/'],
};

2. 服务端获取查询参数的注意事项
   useRouter()是客户端专属钩子，服务端无法直接调用。在Pages Router的服务端场景（比如getServerSideProps），你需要通过上下文对象的query属性获取参数：

// pages/index.tsx
export async function getServerSideProps(context) {
  // 从服务端上下文获取查询参数
  const requiredParam = context.query.requiredParam;
  return {
    props: { requiredParam }, // 传递给页面组件
  };
}

export default function Home({ requiredParam }) {
  return <div>服务端获取的参数：{requiredParam}</div>;
}

如果是在客户端组件中，才可以使用useRouter()获取查询参数：

// pages/index.tsx
import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();
  const requiredParam = router.query.requiredParam;
  return <div>客户端获取的参数：{requiredParam}</div>;
}

3. 关于Link添加查询参数未生效的补充
   如果之前用Link的URL对象方式没生效，检查写法是否正确：

import Link from 'next/link';

// 正确的URL对象写法
<Link href={{ pathname: '/', query: { requiredParam: 'something' } }}>
  跳转首页
</Link>

确保Link组件是从next/link导入，且URL对象的pathname和query结构正确，若仍有问题，可尝试直接拼接字符串形式的URL：

<Link href="/?requiredParam=something">跳转首页</Link>

内容的提问来源于stack exchange，提问作者Стефан Аксенченко