Next.js单页布局HeaderLayout组件无法获取SWR全局配置问题

SWR的全局配置SWRConfig是基于React Context实现的，Context的取值规则是仅能在Provider组件的子组件树渲染阶段才能获取到注入的配置值。

你当前的写法中，HeaderLayout被作为普通函数直接赋值给First.getLayout，在_app.tsx中调用getLayout(<Component {...pageProps} />)时，HeaderLayout函数会立即执行，此时SWRConfig组件还未完成挂载，因此HeaderLayout内部调用的useSWR无法获取到全局配置的fetcher。

而页面组件First是作为参数传入HeaderLayout、最终在SWRConfig的子组件树中渲染的，因此它内部的useSWR可以正常拿到全局配置。

推荐优先调整Layout的定义和调用方式，符合React组件的渲染规则：

1. 修改HeaderLayout为标准React组件，将入参改为children属性而非直接接收page参数：

// layout/HeaderLayout布局组件代码
const HeaderLayout = ({ children }: { children: React.ReactElement }) => {
  const router = useRouter();
  const { project: projectId, application: applicationId } = router.query;

  const { data } = useSWR(`http://...`);

  return (
    <>
      <Header />
      {children}
    </>
  );
};

2. 调整页面中getLayout的赋值逻辑，返回JSX结构而非直接调用Layout函数：

// pages/first页面代码
First.getLayout = (page: React.ReactElement) => <HeaderLayout>{page}</HeaderLayout>;

调整后HeaderLayout会作为SWRConfig的子组件完成渲染，内部的useSWR就能正常获取全局配置的fetcher参数。

如果不想大规模调整现有Layout写法，也可以选择以下备选方案：

• 全局导出定义好的fetcher函数，在Layout组件中手动传入useSWR的第二个参数
• 排查项目依赖，确保仅存在一个SWR包副本，避免多实例导致Context隔离

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