Next.js 13 App目录服务端组件如何获取当前URL？

在App目录的服务端组件中，无法使用next/router，也没有getServerSideProps，但可以通过**next/headers提供的headers()函数**从请求头中提取信息来拼接完整URL，具体实现如下：

核心实现代码 #

先导入headers函数，再从请求头中解析协议、域名、端口等信息：

import { headers } from 'next/headers';

export default async function myPage() {
  const headersList = headers();
  // 获取包含域名和端口的host（如www.myserver.com:3000）
  const host = headersList.get('host');
  // 优先用反向代理传递的真实协议，本地开发或无代理时根据环境判断
  const protocol = headersList.get('x-forwarded-proto') || (process.env.NODE_ENV === 'production' ? 'https' : 'http');
  
  // 拆分域名与端口
  const [domain, port] = host.split(':');
  
  // 拼接包含路径和查询参数的完整URL
  const fullNextUrl = headersList.get('next-url') || '';
  const [pathname, searchParams] = fullNextUrl.split('?');
  const fullUrl = `${protocol}://${host}${pathname}${searchParams ? `?${searchParams}` : ''}`;

  return (
    <div>
      <p>协议: {protocol}</p>
      <p>域名: {domain}</p>
      <p>端口: {port || (protocol === 'https' ? '443' : '80')}</p>
      <p>完整URL: {fullUrl}</p>
    </div>
  );
}

关键说明 #

• host请求头：直接返回域名加端口，本地开发时是localhost:3000，生产环境若有自定义端口也会一并返回。
• 协议判断：部署在Vercel、Nginx这类反向代理环境时，x-forwarded-proto会传递用户实际访问的协议；本地开发直接用http即可。
• 路径与查询参数：next-url是Next.js内部传递的请求头，包含当前页面的完整路径和查询参数。

客户端组件补充（若需切换） #

如果要在客户端组件中获取URL，需先添加'use client'指令，再使用next/navigation的API：

'use client';
import { usePathname, useSearchParams } from 'next/navigation';

export default function ClientComponent() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const protocol = window.location.protocol;
  const domain = window.location.hostname;
  const port = window.location.port;
  const fullUrl = `${protocol}//${domain}${port ? `:${port}` : ''}${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;

  return <p>客户端完整URL: {fullUrl}</p>;
}

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