Next.js 13 App目录服务端如何获取路由Pathname？

1. 在Server Component（Page/Layout）中获取完整URL #

Layout组件默认仅提供children和params，但可以通过next/headers的headers()函数提取请求头信息，拼接出完整URL：

import { headers, redirect } from 'next/headers';

export default async function Page() {
  const headersList = headers();
  // 从请求头获取协议、主机、路径和查询参数
  const protocol = headersList.get('x-forwarded-proto') || 'http';
  const host = headersList.get('host') || '';
  const pathname = headersList.get('x-nextjs-pathname') || '';
  const search = headersList.get('x-nextjs-search') || '';

  const fullUrl = `${protocol}://${host}${pathname}${search}`;
  
  // 修改searchParams并重定向
  const targetUrl = new URL(fullUrl);
  targetUrl.searchParams.set('newParam', 'targetValue');
  
  redirect(targetUrl.toString());
}

x-nextjs-pathname和x-nextjs-search是Next.js内部注入的请求头，能直接拿到路径和查询参数部分，比手动拼接更可靠。

2. 在Route Handler中获取完整URL #

如果是在app目录下的API路由（route.ts）中处理重定向，可直接通过request.url拿到完整请求地址：

import { redirect } from 'next/navigation';
import { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const targetUrl = new URL(request.url);
  targetUrl.searchParams.set('redirected', 'success');
  
  redirect(targetUrl.toString());
}

3. 在Middleware中处理全局重定向（推荐） #

如果是全局范围的重定向逻辑，Middleware是更高效的选择，它能直接拦截请求并修改URL：

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

export function middleware(request: NextRequest) {
  const targetUrl = request.nextUrl.clone();
  targetUrl.searchParams.set('globalParam', 'globalValue');
  
  return NextResponse.redirect(targetUrl);
}

// 配置Middleware生效的路径规则
export const config = {
  matcher: '/target-path/:path*',
};

注意事项 #

• Server Component中调用redirect必须在组件顶层代码执行，不能放在事件处理函数内。
• Middleware运行在边缘节点，适合处理全局路由逻辑，性能优于页面内处理。
• 确保使用的Next.js版本在13.0.0及以上，以支持x-nextjs-pathname等内部请求头。

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