Next.js 14（App Router）中使用NextResponse.rewrite隐藏page参数问题

你的理解有一处关键错误，同时代码也存在几个需要调整的地方，下面逐一说明：

一、关于NextResponse.rewrite的核心误解 #

NextResponse.rewrite是服务器内部的请求转发机制，它不会修改浏览器地址栏显示的URL。用户访问时带page参数的URL会一直显示在地址栏，只有服务器端会用重写后的URL处理请求——这和你以为的“修改地址栏URL”完全相反。如果要更新地址栏，你需要用NextResponse.redirect。

二、当前代码的问题 #

1. 匹配范围太局限：config.matcher只设置了'/'，意味着只有访问根路径时才会触发中间件，其他页面的page参数根本不会被处理。如果要全局生效，建议排除静态资源和API路径，用这个匹配规则：'/((?!api|_next/static|_next/image|favicon.ico).*)'。
2. 冗余的URL转换：updatedUrl已经是合法的URL对象，没必要转成字符串再重新实例化，直接传给NextResponse.rewrite就行。
3. 原page参数会丢失：按照当前逻辑，重写后服务器组件通过searchParams只能拿到删除page后的参数，原page值会彻底丢失。如果你的需求是地址栏不显示page但服务器仍能读取该参数，当前逻辑完全达不到目的。

三、仅隐藏地址栏page参数的修正代码（服务器不再获取该参数） #

如果你的需求只是让地址栏看不到page，不需要服务器再读取它，用redirect替换rewrite即可：

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

export function middleware(request: NextRequest) {
  const updatedUrl = request.nextUrl.clone();
  if (updatedUrl.searchParams.has('page')) {
    updatedUrl.searchParams.delete('page');
    // redirect会让浏览器跳转新地址，地址栏同步更新
    return NextResponse.redirect(updatedUrl);
  }
  // 没有page参数时正常放行
  return NextResponse.next();
}

export const config = {
  matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
};

四、隐藏地址栏page且服务器仍能读取的方案 #

如果要实现地址栏不显示page，但服务器组件还能拿到该参数，可以把page值存入请求头，再重定向到删除参数后的地址：

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

export function middleware(request: NextRequest) {
  const pageParam = request.nextUrl.searchParams.get('page');
  if (pageParam) {
    const updatedUrl = request.nextUrl.clone();
    updatedUrl.searchParams.delete('page');
    // 创建重定向响应，添加自定义请求头存储page值
    const response = NextResponse.redirect(updatedUrl);
    response.headers.set('x-page', pageParam);
    return response;
  }
  return NextResponse.next();
}

export const config = {
  matcher: '/((?!api|_next/static|_next/image|favicon.ico).*)',
};

在服务器组件中读取该参数：

import { headers } from 'next/headers';

export default function Page() {
  const page = headers().get('x-page');
  return <div>当前页码：{page || '1'}</div>;
}

内容的提问来源于stack exchange，提问作者Seung Joo Noh