Next.js 13应用目录中服务端组件如何获取URL pathname？

服务端组件运行在Node.js环境，不存在浏览器的window对象，所以window.location无法使用，以下是几种可行的解决方法：

1. 利用请求头直接获取完整Pathname #

Next.js会自动在请求头中注入x-nextjs-pathname字段，服务端组件可以通过next/headers提供的API读取这个值：

import { headers } from 'next/headers';

export default function ServerPage() {
  const headerList = headers();
  const pathname = headerList.get('x-nextjs-pathname');

  return <p>当前路径：{pathname}</p>;
}

2. 动态路由场景下通过params拼接路径 #

如果你的页面是动态路由（比如app/[category]/[id]/page.js），服务端组件会自动接收params参数，你可以根据路由结构拼接出对应的pathname：

export default function DynamicRoutePage({ params }) {
  // 对应路由/app/electronics/1001，params的值为{ category: 'electronics', id: '1001' }
  const pathname = `/${params.category}/${params.id}`;

  return <p>当前路径：{pathname}</p>;
}

补充：客户端组件获取Pathname的方式 #

如果需要在客户端组件中获取路径，可以使用next/navigation的usePathname钩子，但记得要加上'use client'指令声明这是客户端组件：

'use client';

import { usePathname } from 'next/navigation';

export default function ClientPage() {
  const pathname = usePathname();

  return <p>当前路径：{pathname}</p>;
}

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