Next.js借助Cloudflare获取用户真实位置 替代getStaticProps实现方案

getStaticProps属于Next.js服务端运行的静态生成逻辑，内部发起的所有请求都由部署的服务器端执行，所以你调用Cloudflare trace接口拿到的是谷歌云服务器的位置，本地运行时拿到的就是本地环境的位置，和真实访问用户的位置无关。

要拿到用户端的位置，需要把请求放到用户浏览器侧执行，你已经验证的客户端useEffect方案即可实现需求，完整改造后的页面代码如下：

import { useState, useEffect } from 'react'

function MyPage() {
  // 可自定义默认兜底位置
  const [locData, setLocData] = useState("EN");
  
  useEffect(() => {
    fetch("https://www.cloudflare.com/cdn-cgi/trace")
      .then((response) => response.text())
      .then((two) => {
        const data = two.replace(/[\r\n]+/g, '","').replace(/\=+/g, '":"');
        const formattedData = '{"' + data.slice(0, data.lastIndexOf('","')) + '"}';
        const locale = JSON.parse(formattedData);
        setLocData(locale.loc);
      });
  }, []);

  return locData
}

export default MyPage

• 可增加加载状态，避免页面初始加载时默认值和实际位置切换出现的跳变
• 可将获取到的位置信息存储到localStorage，用户后续访问无需重复请求接口

内容的提问来源于stack exchange，提问作者Celil Şahin