Next.js 14 App Router：如何在layout.tsx中获取客户端子域名

明确结论：可以在layout.tsx中获取到客户端的真实子域名，问题出在开发环境配置或请求头传递环节，以下是具体解决方法：

1. 开发环境（localhost）的模拟与修复 #

本地直接访问localhost:3000时，host头自然返回localhost:3000，要模拟子域名场景需修改本地hosts文件：

• Windows：打开C:\Windows\System32\drivers\etc\hosts；Mac/Linux：打开/etc/hosts
• 添加映射规则：127.0.0.1 subdomain.trendspot80.tech
• 重启浏览器后访问subdomain.trendspot80.tech:3000，此时headers().get('host')会返回subdomain.trendspot80.tech:3000，即可提取子域名。

2. 通用获取子域名的方法（适配开发/生产） #

步骤1：获取真实Host头 #

优先读取反向代理传递的x-forwarded-host头（大部分部署平台如Nginx、Vercel、Cloudflare会自动传递）， fallback到原生host头：

const host = headers().get('x-forwarded-host') || headers().get('host') || '';

如果用Nginx反向代理，需确保配置中添加：

proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;

步骤2：从Host中解析子域名 #

编写工具函数提取子域名（假设主域名为trendspot80.tech）：

function getSubdomain(host: string): string {
  // 移除端口号
  const cleanHost = host.split(':')[0];
  const domainParts = cleanHost.split('.');
  // 主域名是两段，所以子域名是前面的部分
  if (domainParts.length >= 3) {
    return domainParts.slice(0, domainParts.length - 2).join('.');
  }
  return ''; // 无自域名时返回空
}

// 在RootLayout中调用
const host = headers().get('x-forwarded-host') || headers().get('host') || '';
const subdomain = getSubdomain(host);

3. 适配你的业务代码 #

修复generateMetadata中的硬编码 #

将generateMetadata里硬编码的域名替换为动态获取的域名：

export async function generateMetadata(): Promise<Metadata> {
  const host = headers().get('x-forwarded-host') || headers().get('host') || '';
  const subdomain = getSubdomain(host);
  const targetDomain = subdomain ? `${subdomain}.trendspot80.tech` : 'trendspot80.tech';
  
  const { data } = await getWebsiteLayouts(targetDomain);
  if (!data) {
    return {
      title: "TrendSpot ",
      description: "Trendspot largest social media platform in the world",
    };
  }
  return {
    title: data?.results?.[0].name,
    description: data?.results?.[0].description || "",
  };
}

注意事项 #

• 不要依赖referer头：该字段仅在跳转场景存在，且部分浏览器会屏蔽，完全不可靠。
• 部署平台适配：Vercel、Netlify等平台默认会传递正确的Host头，无需额外配置。

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