Next.js使用getLayout的持久化布局如何传递动态props？

方案1：服务端请求+页面props透传（优先推荐） #

如果你的接口数据支持在服务端获取，直接修改_app.tsx的getLayout调用逻辑，把页面属性透传给getLayout函数即可：

// _app.tsx 全局文件修改
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout ?? ((page) => page)
  // 额外把pageProps作为第二个参数传入getLayout
  return getLayout(<Component {...pageProps} />, pageProps)
}

页面代码改造如下：

import { Layout } from 'hoc';
import { fetchData } from 'api/index';
import { GetServerSideProps } from 'next';

const Page = ({ data }) => {
  return <div>hii</div>;
};

// 直接从第二个参数拿到页面props传给Layout
Page.getLayout = function getLayout(page: React.ReactNode, pageProps: any) {
  return <Layout data={pageProps.data}>{page}</Layout>;
};

// 数据请求移到服务端函数中
export const getServerSideProps: GetServerSideProps = async () => {
  const data = await fetchData()
  return {
    props: { data }
  }
}

export default Page;

该方案逻辑最简洁，也符合服务端渲染的性能优化要求。

方案2：局部Context注入（适合客户端请求场景） #

你之前担心Context需要全局Provider，这个方案里的Provider是挂载在当前页面组件内部的局部上下文，仅对当前页面生效，不需要全局配置，完全适配你的场景：
首先改造Layout组件，内置Context支持：

// hoc/Layout.tsx
import { createContext, useContext, ReactNode } from 'react';

const LayoutDataContext = createContext(null);
// 给Page组件用的注入Provider
export const LayoutDataProvider = LayoutDataContext.Provider;
// Layout内部消费数据
const useLayoutData = () => useContext(LayoutDataContext);

export const Layout = ({ children }: { children: ReactNode }) => {
  const data = useLayoutData();
  // 布局逻辑中可直接使用拿到的data
  return <div className="layout-container">
    {/* 原有布局代码，比如导航、侧边栏等 */}
    {children}
  </div>
}

页面代码改造如下：

import { Layout, LayoutDataProvider } from 'hoc';
import { fetchData } from 'api/index';
import { useQuery } from 'react-query';

const Page = () => {
  const { data } = useQuery('data', fetchData);
  
  return (
    <LayoutDataProvider value={data}>
      <div>hii</div>
    </LayoutDataProvider>
  );
};

Page.getLayout = function getLayout(page: React.ReactNode) {
  return <Layout>{page}</Layout>;
};

export default Page;

该方案完全内聚在当前页面维度，不需要全局状态，也没有额外的性能负担。

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