Next.js多布局场景下如何通过Context实现全局状态持久共享

问题根因 #

全局状态重置的核心原因是 GlobalContext.Provider 被放在了可变的布局组件（Layout/Layout2）内部，或是放在了 getLayout 包裹的动态渲染内容里。切换不同布局的页面时，原布局组件会被卸载，对应的Context Provider实例也会被销毁，新布局的Provider重新挂载初始化，全局状态自然会被重置。

解决方案 #

步骤1：将Context Provider移到根层 #

把全局Context的Provider放到_app.js的最外层，脱离动态布局的渲染范围。_app.js是Next.js应用的根组件，整个应用生命周期内只会挂载一次，放在这里的Provider不会因为页面/布局切换被销毁。

修正后的_app.js示例代码：

import GlobalContext from "../utils/GlobalContext";
// 原有维护全局状态的逻辑（useState、useReducer等）保留在此处

export default function App({ Component, pageProps }) {
  // 没有自定义getLayout的页面默认走通用Layout
  const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);

  return (
    {/* 全局Provider放在最外层，包裹所有布局和页面内容 */}
    <GlobalContext.Provider value={{
      // 原有要共享的全局状态、修改方法都放在此处
    }}>
      {getLayout(<Component {...pageProps} />)}
    </GlobalContext.Provider>
  );
}

步骤2：清理布局内的重复Provider #

移除Layout、Layout2等各个布局组件内部的GlobalContext.Provider声明，避免多层Provider嵌套覆盖导致状态异常。如果之前全局状态的维护逻辑写在布局组件内部，统一迁移到_app.js中维护即可。

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