Next.js中局部Context的放置位置与组件树包裹实现方案

核心原则 #

要实现局部Context减少首屏脚本体积，核心是不要在根级pages/_app.js里静态引入/包裹非全局的Context——_app.js里的静态依赖会被打入全站公共bundle，不管用户访问哪个路由都会加载，完全违背模块化拆分的目的。
你现在把HomeContext.js放在contexts目录的做法是可行的，Context作为可复用逻辑不需要硬塞进路由目录，只要控制好引入位置，Next.js自动的路由级代码分割就会生效。

步骤1：完成HomeContext基础封装 #

先在contexts/HomeContext.js里写Context的基础逻辑，封装Provider和专属调用hook：

import { createContext, useContext, useState } from 'react';

const HomeContext = createContext(null);

export function HomeProvider({ children }) {
  // 此处维护/home模块专属状态，比如首页信息流、新闻筛选条件、模块专属用户偏好等
  const [homeFeed, setHomeFeed] = useState([]);
  const [newsFilter, setNewsFilter] = useState('latest');

  return (
    <HomeContext.Provider value={{ homeFeed, setHomeFeed, newsFilter, setNewsFilter }}>
      {children}
    </HomeContext.Provider>
  );
}

// 封装自定义hook，简化调用同时做使用范围校验
export function useHomeContext() {
  const contextValue = useContext(HomeContext);
  if (!contextValue) throw new Error('useHomeContext仅可在/Home模块的组件树内使用');
  return contextValue;
}

步骤2：选择合适的Provider包裹位置 #

有两种成熟方案，按需选择即可：

方案1：模块布局包裹（最推荐） #

适合/home模块存在公共布局（比如模块专属导航、侧边栏、通用头部）的场景，逻辑聚合度最高，完全不会污染全局bundle：

1. 在pages/home下新建组件目录，创建模块布局文件pages/home/components/HomeLayout.jsx：

import { HomeProvider } from '../../../contexts/HomeContext';

export default function HomeLayout({ children }) {
  return (
    <HomeProvider>
      {/* 这里可以放/home模块共用的导航、侧栏等公共组件 */}
      <main className="home-module-wrapper">
        {children}
      </main>
    </HomeProvider>
  );
}

2. 所有/home路径下的页面，都用这个布局组件包裹即可，比如pages/home/index.js：

import HomeLayout from './components/HomeLayout';
import { useHomeContext } from '../../contexts/HomeContext';

export default function HomeIndex() {
  const { homeFeed } = useHomeContext();
  // 页面原有业务逻辑
  return (
    <HomeLayout>
      <h1>首页</h1>
      {/* 首页内容 */}
    </HomeLayout>
  );
}

pages/home/news.js写法完全一致，用HomeLayout包裹内容即可。
这种方案下，HomeContext、HomeLayout的代码只会在用户访问/home开头的路由时才会被加载，其他路由的首屏包完全不包含这部分代码，完全符合性能优化目标。

方案2：根App路由判断+动态导入 #

适合/home模块没有公共布局、不想在每个页面重复写包裹代码的场景，注意必须用动态导入避免Context进入全局bundle：
修改根级pages/_app.js，不要静态引入HomeProvider，用next/dynamic做按需加载，结合路由判断决定是否渲染Provider：

import { GlobalProvider } from '../contexts/GlobalContext';
import { useRouter } from 'next/router';
import dynamic from 'next/dynamic';

// 动态导入HomeProvider，仅当实际渲染时才加载对应代码，不会进入全局首屏包
const HomeProvider = dynamic(() => 
  import('../contexts/HomeContext').then(mod => mod.HomeProvider)
);

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const isHomeModule = router.pathname.startsWith('/home');

  return (
    <GlobalProvider>
      {/* 全局状态照常包裹，所有路由可用 */}
      {isHomeModule ? (
        <HomeProvider>
          <Component {...pageProps} />
        </HomeProvider>
      ) : (
        <Component {...pageProps} />
      )}
    </GlobalProvider>
  );
}

export default MyApp;

这种写法不需要修改/home下的每个页面，只要路由匹配/home前缀，所有页面组件自动能访问HomeContext的状态，同时不会增加首屏加载体积。

注意点 #

• 不要为了省事直接在根_app.js里静态引入HomeProvider做路由判断，静态导入的依赖会被打包进全局公共chunk，哪怕加了条件判断也会在首屏加载，完全失去拆分意义。
• 只有真正需要跨多个/home下组件共享的状态才放进HomeContext，组件内部的私有状态直接用useState维护即可，避免Context臃肿导致的不必要重渲染。

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