Next.js非组件配置文件中如何获取当前URL或主机名？

在Next.js里直接在非组件配置文件中访问window会报错，因为服务器端渲染阶段没有window对象。这里给你几个可行的解决办法：

• 延迟获取，在浏览器环境执行
  把获取逻辑封装成函数，只有在确认浏览器环境（window存在）时才读取window.location.hostname。服务器端执行时不会触发这部分逻辑，也就不会报错。

  export const getCurrentUrl = () => {
    return isEmulators ? "http://localhost:3000" : (typeof window !== 'undefined' ? window.location.hostname : '')
  }
  

  之后在组件中调用这个函数即可——组件在客户端渲染时window已经存在，能正常拿到主机名。

• 通过页面的服务端函数传递主机名
  如果你的配置逻辑最终要在页面组件中使用，可以在页面的getServerSideProps里从context.req.headers.host拿到主机名，再作为props传给页面组件，之后把这个值传入你的配置逻辑。
  页面组件示例：

  export async function getServerSideProps(context) {
    const hostname = context.req.headers.host;
    return {
      props: { hostname },
    };
  }
  
  export default function YourPage({ hostname }) {
    // 这里可以把hostname传给你的配置逻辑使用
    const currentUrl = isEmulators ? "http://localhost:3000" : hostname;
    // ...
  }
  

• 结合环境变量兜底
  如果生产环境的主机名是固定的，可以在.env文件中配置公开环境变量（前缀NEXT_PUBLIC_），服务器端优先读环境变量，客户端再 fallback 到window：

  NEXT_PUBLIC_APP_HOSTNAME=your-production-domain.com
  

  配置文件代码：

  export const currentUrl = isEmulators 
    ? "http://localhost:3000" 
    : process.env.NEXT_PUBLIC_APP_HOSTNAME || (typeof window !== 'undefined' ? window.location.hostname : '')
  

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