Next.js非首页路由_app getInitialProps返回pageProps为空如何修复

你当前写法存在两个核心错误：

1. 自定义_app的getInitialProps返回值时，把全局请求拿到的response放在了返回对象的根层级，没有合并到pageProps字段内。Next.js的页面组件只会接收pageProps下挂载的属性，根层级的自定义字段不会被注入到页面渲染流中。
2. 你返回的结构打散了默认App.getInitialProps返回的pageProps结构，非首页路由首屏加载、客户端路由跳转时，框架读取不到对应页面的初始props，就会返回空对象。首页能正常拿到数据只是首次服务端渲染时的特殊兼容表现，并非正确的传参逻辑。

调整getInitialProps的返回结构，将全局拉取的公共数据合并到pageProps字段内，同时保留原有页面自身的props，不要在返回根层放自定义数据：

import App, { AppContext, AppInitialProps } from 'next/app';

MyApp.getInitialProps = async (context: AppContext): Promise<AppInitialProps> => {
  // 拉取全局公共接口数据
  const globalResponse = await fetchData();
  // 执行框架默认的App初始化逻辑，拿到当前访问路由对应的页面初始props
  const defaultAppProps = await App.getInitialProps(context);

  return {
    ...defaultAppProps,
    pageProps: {
      // 先展开当前页面自身返回的props，避免覆盖页面级getInitialProps/getServerSideProps返回的字段
      ...defaultAppProps.pageProps,
      // 注入全局公共数据，所有路由下的页面都能从props中拿到该字段
      globalData: globalResponse
    }
  };
};

• 如果使用Next.js 10及以上版本，不推荐在_app中重写getInitialProps实现全局数据拉取：该写法会强制全站所有页面取消自动静态优化，全部走服务端渲染，带来不必要的性能损耗。公共数据拉取更推荐在_app中搭配SWR/React Query做客户端请求，或在页面级getServerSideProps中获取后透传。
• 修复后可直接验证：访问/about等非首页路由时，在页面组件中解构props即可拿到注入的全局接口数据，客户端从首页跳转到其他路由时数据也不会丢失。
• 若修复后仍存在数据为空的问题，检查fetchData方法是否存在依赖首页路由上下文的逻辑，比如硬编码读取首页路径下的cookie、请求参数，导致非首页路由下接口请求本身失败。

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