咨询：Next 13 SSR页面无需Middleware获取当前pathname的方法

方案1：利用服务器组件的headers()函数提取内部请求头 #

在服务器组件中，可通过async函数结合headers()获取Next.js注入的x-nextjs-pathname请求头，直接拿到当前pathname：

import { headers } from 'next/headers';

export default async function Page() {
  const headersList = headers();
  const pathname = headersList.get('x-nextjs-pathname');

  return <div>当前Pathname：{pathname}</div>;
}

注：该请求头为Next.js内部注入，仅在服务器端渲染时生效，不会暴露给客户端。

方案2：解析request-url请求头获取完整路径 #

若需更灵活的解析逻辑，可从headers()中获取request-url头，通过URL对象解析出pathname：

import { headers } from 'next/headers';

export default async function Page() {
  const headersList = headers();
  const requestUrl = headersList.get('request-url');
  if (!requestUrl) return <div>无法获取Pathname</div>;
  
  const url = new URL(requestUrl);
  const pathname = url.pathname;

  return <div>当前Pathname：{pathname}</div>;
}

方案3：结合动态路由params拼接完整路径 #

如果页面是动态路由（如app/[slug]/page.tsx），可通过组件接收的params参数，结合已知路由结构拼接完整pathname：

export default async function Page({ params }: { params: { slug: string } }) {
  const pathname = `/articles/${params.slug}`;

  return <div>当前Pathname：{pathname}</div>;
}

该方法适用于路由结构固定的场景，路由层级复杂时拼接会相对繁琐。

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