Next.js 13 App目录下服务器组件如何获取域名与完整路径？

核心方案：利用headers()函数获取请求元数据 #

在App目录的服务器组件中，直接通过next/headers提供的headers()函数，就能拿到请求头里的关键信息，替代原getServerSideProps的context能力：

import { headers } from 'next/headers';

export default async function ServerComponent() {
  const headersList = headers();
  // 获取请求域名（含端口，如存在）
  const domain = headersList.get('host');
  // 获取Next.js内部传递的完整路径（不含协议域名）
  const relativeUrl = headersList.get('next-url');
  // 拼接完整URL（处理部署环境的协议，如HTTPS）
  const protocol = headersList.get('x-forwarded-proto') || 'http';
  const fullUrl = `${protocol}://${domain}${relativeUrl}`;
  // 解析路径名
  const pathname = new URL(fullUrl).pathname;

  // 调用API传递域名与路径，获取对应账户数据
  const res = await fetch(`/api/accounts?domain=${encodeURIComponent(domain)}&path=${encodeURIComponent(pathname)}`);
  const accountData = await res.json();

  return (
    <div>
      <p>当前域名：{domain}</p>
      <p>完整路径：{pathname}</p>
      <p>账户数据：{JSON.stringify(accountData)}</p>
    </div>
  );
}

动态路由场景适配 #

如果是动态路由页面（如app/[tenant]/page.js），可以结合组件自带的params参数，拿到动态路由值，再配合域名做数据匹配：

export default async function TenantPage({ params }) {
  const headersList = headers();
  const domain = headersList.get('host');
  const tenantSlug = params.tenant;

  const res = await fetch(`/api/accounts?domain=${encodeURIComponent(domain)}&tenant=${encodeURIComponent(tenantSlug)}`);
  const accountData = await res.json();

  return <div>租户{tenantSlug}（域名：{domain}）的数据：{JSON.stringify(accountData)}</div>;
}

复用逻辑：封装工具函数 #

为避免重复代码，可封装一个工具函数统一处理请求信息：

// app/utils/requestInfo.js
import { headers } from 'next/headers';

export function getRequestDetails() {
  const headersList = headers();
  const domain = headersList.get('host');
  const protocol = headersList.get('x-forwarded-proto') || 'http';
  const relativeUrl = headersList.get('next-url');
  const fullUrl = `${protocol}://${domain}${relativeUrl}`;
  const urlObj = new URL(fullUrl);

  return {
    domain,
    fullUrl,
    pathname: urlObj.pathname,
    searchParams: urlObj.searchParams,
    protocol,
  };
}

在组件中调用：

import { getRequestDetails } from '@/app/utils/requestInfo';

export default async function AnyServerComponent() {
  const { domain, pathname } = getRequestDetails();
  // 后续业务逻辑...
}

注意事项 #

• headers()仅支持在服务器组件或Server Actions中使用，客户端组件无法调用。
• 部署在反向代理或托管平台（如Vercel、Nginx）时，需确保x-forwarded-proto和host请求头被正确传递，防止获取到内部代理域名或错误协议。
• 多域名场景下，建议在API层添加域名白名单校验，避免非法域名请求获取数据。

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