Next.js项目初始加载时填充MobX存储的可行方案问询

完全可以通过MobX在应用初始化时存入全局数据，让所有嵌套页面和组件无需传递props或重复编写getStaticProps就能访问数据。下面是具体实现步骤：

1. 创建MobX全局Store #

先定义一个存储公共数据的MobX store，包含数据状态和更新方法：

// stores/commonStore.ts
import { makeAutoObservable } from "mobx";

class CommonStore {
  // 初始化默认值
  prop1: string | null = null;
  prop2: string | null = null;

  constructor() {
    makeAutoObservable(this); // 自动实现响应式
  }

  // 更新公共数据的方法
  setCommonData(data: { prop1: string; prop2: string }) {
    this.prop1 = data.prop1;
    this.prop2 = data.prop2;
  }
}

// 导出单例实例
export const commonStore = new CommonStore();

2. 在_app.tsx中初始化Store #

利用页面getStaticProps返回的数据，在_app.tsx中统一初始化MobX store，确保服务端渲染和客户端hydration时数据一致：

// _app.tsx
import { AppProps } from "next/app";
import { commonStore } from "../stores/commonStore";
import PageLayout from "../components/PageLayout";

export default function App({ Component, pageProps }: AppProps) {
  // 如果页面返回了公共数据，就同步到MobX store
  if (pageProps.commonData) {
    commonStore.setCommonData(pageProps.commonData);
  }

  return (
    <>
      <PageLayout>
        <Component {...pageProps} />
      </PageLayout>
    </>
  );
}

3. 封装公共数据获取逻辑 #

写一个复用的getCommonStaticProps函数，避免每个页面重复写数据获取代码：

// utils/getCommonStaticProps.ts
export const getCommonStaticProps = async () => {
  // 替换成你的实际数据获取逻辑（API请求、本地文件读取等）
  const prop1 = "示例文章名称";
  const prop2 = "示例项目名称";

  return { prop1, prop2 };
};

然后在页面中调用这个函数，把公共数据同时传给页面和_app.tsx：

// pages/index.tsx
import { NextPage } from "next";
import { getCommonStaticProps } from "../utils/getCommonStaticProps";
import { commonStore } from "../stores/commonStore";
import AnotherComponent from "../components/AnotherComponent";

export const getStaticProps = async () => {
  const commonData = await getCommonStaticProps();
  return {
    props: {
      // 可选：如果页面自身需要props可以传递，也可以直接从store取
      ...commonData,
      // 传给_app.tsx用于初始化store的字段
      commonData,
    },
  };
};

const Home: NextPage = () => {
  // 直接从MobX store读取数据，无需依赖页面props
  const { prop1, prop2 } = commonStore;

  return (
    <>
      <AnotherComponent data={prop1} />
      <AnotherComponent data={prop2} />
    </>
  );
};

export default Home;

4. 嵌套组件直接访问Store #

比如PageLayout里的Footer组件，直接导入store使用即可，不用再通过props传递：

// components/Footer.tsx
import { commonStore } from "../stores/commonStore";

const Footer = () => {
  const { prop1, prop2 } = commonStore;
  return (
    <footer>
      <p>文章：{prop1}</p>
      <p>项目：{prop2}</p>
    </footer>
  );
};

export default Footer;

关键注意点 #

• SSR/SSG兼容性：所有数据在页面的getStaticProps中预获取，服务端渲染时store会被正确填充，客户端hydration时数据完全匹配，不会出现内容不一致的问题。
• 无重复请求：公共数据只在getCommonStaticProps中获取一次，所有页面复用这个逻辑，避免重复请求资源。
• 类型安全：可以给store和数据添加TypeScript类型定义，确保代码健壮性。

这样就彻底解决了多层组件传递props的麻烦，也不用在每个页面重复编写数据获取逻辑，所有组件都能直接从MobX store拿到需要的公共数据。

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