如何在getStaticProps中获取主机名？

不能直接在getStaticProps中获取当前请求的主机名——因为getStaticProps是在构建阶段执行的，而非用户请求的实时处理阶段，此时不存在请求上下文，自然拿不到和当前请求相关的主机信息。

下面是不同场景下的解决方案：

场景1：需要固定的主机名（如生产/测试环境域名） #

直接通过环境变量配置或者硬编码：

export async function getStaticProps(context) {
  // 从环境变量读取（注意NEXT_PUBLIC_前缀可让变量在构建时被访问）
  const hostname = process.env.NEXT_PUBLIC_APP_DOMAIN;
  // 或者直接硬编码固定域名
  // const hostname = "your-production-domain.com";

  return {
    props: { hostname }
  };
}

场景2：需要基于请求的动态主机名（如多租户、动态域名） #

这种场景下getStaticProps不适用，改用getServerSideProps，它会在每次用户请求时运行，能获取到请求上下文里的主机名：

export async function getServerSideProps(context) {
  // 从请求头中提取主机名
  const hostname = context.req.headers.host;

  return {
    props: { hostname }
  };
}

场景3：客户端侧获取主机名 #

如果业务逻辑允许在客户端执行，也可以直接在组件中通过浏览器API获取：

function MyComponent() {
  const hostname = typeof window !== "undefined" ? window.location.hostname : "";
  return <div>当前主机名：{hostname}</div>;
}

内容的提问来源于stack exchange，提问作者pelle by shelly gafni