NextJS 14（App Router）中如何同时实现URL内部重写与添加请求头

在Next.js 14的App Router中，无需分开调用NextResponse.next()和NextResponse.rewrite()，直接通过NextResponse.rewrite()的配置参数就能同时完成URL重写和请求头设置。

完整实现代码 #

export const middleware = async (request: NextRequest) => {
  // 替换为你实际的locale解析逻辑和路径处理
  const resolvedLocale = "zh-CN";
  const pathname = request.nextUrl.pathname;

  // 修改目标URL路径
  request.nextUrl.pathname = `/${resolvedLocale}${pathname}`;

  // 基于原请求头创建新实例，添加自定义头
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-pathname', pathname);

  // 同时返回重写后的URL和自定义请求头
  return NextResponse.rewrite(request.nextUrl, {
    request: {
      headers: requestHeaders
    }
  });
};

关键说明 #

• NextResponse.rewrite()的第二个参数支持传入request配置，用法和NextResponse.next()完全一致，可直接在这里设置自定义请求头。
• 必须基于原request.headers创建新的Headers实例，避免直接修改原请求头对象引发的不可预期问题。

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