Next.js的getInitialProps在移动端浏览器不触发，仅Link跳转时生效

算力阿峰

2026-10-3

问题根因&解决方案

最核心的错误是请求地址写死了本地localhost：移动端访问应用时，请求的目标地址http://localhost:3000指向的是移动端本机，而非你运行服务的开发机，导致接口请求直接失败，getInitialProps进入catch分支返回error，页面拿不到数据，看起来就像方法没有被触发。
修复方案：将接口请求改成相对路径即可，修改代码如下：
```
// 修改前
const res = await axios.get("http://localhost:3000/api/blogs?offset=0&max=5");
// 修改后
const res = await axios.get("/api/blogs?offset=0&max=5");
```
排查Next.js自动静态优化规则：如果你的应用是Next.js 9.3及以上版本，当页面的getInitialProps没有依赖请求上下文ctx中的req/res对象时，页面会被自动静态优化，首次客户端加载时不会触发getInitialProps，仅客户端跳转时才会执行。
修复方案：如果需要每次页面加载都执行数据请求，可以替换getInitialProps为getServerSideProps，该方法会在每次请求时都被触发，不会被静态优化逻辑跳过。
检查开发环境网络配置：开发阶段测试移动端兼容性时，需要确保移动端和运行服务的开发机处于同一个局域网，且开发机的防火墙已放开3000端口的访问权限，访问时使用开发机的内网IP代替localhost访问页面。
补充错误调试逻辑：当前getInitialProps的catch分支仅返回error对象，没有打印错误日志，建议补充日志输出，方便排查移动端运行时的具体报错：
```
catch (error) {
  console.error('getInitialProps执行错误：', error)
  return { error };
}
```