Next.js如何让服务端动态加载的数据全局供所有组件使用？

针对你已经在middleware.js中完成API调用，需要将数据全局传递到所有组件的需求，提供以下几种集中式方案：

方案1：Middleware + 自定义高阶函数（Pages Router） #

通过响应头传递数据，结合封装的getServerSideProps高阶函数，避免重复编写逻辑：

步骤1：Middleware中存储数据到响应头 #

// middleware.js
import { NextResponse } from 'next/server';

export async function middleware(request) {
  // 调用API获取全局数据
  const globalData = await fetch('你的API地址').then(res => res.json());
  // 序列化并编码数据（避免特殊字符问题）
  const serializedData = encodeURIComponent(JSON.stringify(globalData));
  
  const response = NextResponse.next();
  // 添加自定义响应头
  response.headers.set('x-global-data', serializedData);
  return response;
}

// 配置生效路径（比如所有页面）
export const config = {
  matcher: '/:path*',
};

步骤2：封装全局getServerSideProps高阶函数 #

// utils/withGlobalData.js
export const withGlobalData = (pageGetServerSideProps = async () => ({ props: {} })) => {
  return async (context) => {
    // 从请求头读取数据并解析
    const serializedData = context.req.headers['x-global-data'];
    const globalData = JSON.parse(decodeURIComponent(serializedData));
    
    // 执行页面自身的getServerSideProps逻辑（如果有）
    const pageProps = await pageGetServerSideProps(context);
    
    // 合并全局数据与页面自有props
    return {
      props: {
        ...pageProps.props,
        globalData,
      },
    };
  };
};

步骤3：页面中使用 #

// pages/任意页面.js
import { withGlobalData } from '../utils/withGlobalData';

function YourPage({ globalData, pageSpecificProps }) {
  // 直接使用globalData
  return <div>{globalData.userName}</div>;
}

// 用高阶函数包裹页面的getServerSideProps
export const getServerSideProps = withGlobalData(async (context) => {
  // 页面自身的props逻辑（可选）
  return {
    props: { pageSpecificProps: '页面专属数据' },
  };
});

export default YourPage;

方案2：结合Context实现全局组件可用（Pages/App Router通用） #

在根组件（_app.js或layout.js）中接收全局数据，注入React Context，所有子组件可直接通过Hook获取，无需逐层传参：

步骤1：创建GlobalData Context #

// contexts/GlobalDataContext.js
import { createContext, useContext } from 'react';

const GlobalDataContext = createContext(null);

export function GlobalDataProvider({ children, globalData }) {
  return (
    <GlobalDataContext.Provider value={globalData}>
      {children}
    </GlobalDataContext.Provider>
  );
}

export function useGlobalData() {
  const context = useContext(GlobalDataContext);
  if (!context) {
    throw new Error('useGlobalData必须在GlobalDataProvider组件内使用');
  }
  return context;
}

步骤2：在根组件中注入数据 #

Pages Router （_app.js）

// pages/_app.js
import { GlobalDataProvider } from '../contexts/GlobalDataContext';
import { withGlobalData } from '../utils/withGlobalData';

function MyApp({ Component, pageProps, globalData }) {
  return (
    <GlobalDataProvider globalData={globalData}>
      <Component {...pageProps} />
    </GlobalDataProvider>
  );
}

// 给根App挂载全局数据逻辑，所有页面自动继承
MyApp.getInitialProps = withGlobalData(async (appContext) => {
  const appProps = await App.getInitialProps?.(appContext) || { props: {} };
  return { ...appProps };
});

export default MyApp;

App Router （layout.js，Server Component）

// app/layout.js
import { headers } from 'next/headers';
import { GlobalDataProvider } from '../contexts/GlobalDataContext';

export default function RootLayout({ children }) {
  const headersList = headers();
  const serializedData = headersList.get('x-global-data');
  const globalData = JSON.parse(decodeURIComponent(serializedData));
  
  return (
    <html lang="zh-CN">
      <body>
        <GlobalDataProvider globalData={globalData}>
          {children}
        </GlobalDataProvider>
      </body>
    </html>
  );
}

步骤3：任意组件中使用 #

// components/任意组件.js
// App Router下的客户端组件需添加'use client'指令
'use client';
import { useGlobalData } from '../contexts/GlobalDataContext';

export default function AnyComponent() {
  const globalData = useGlobalData();
  return <div>当前用户：{globalData.userName}</div>;
}

注意事项 #

• 数据大小限制：如果全局数据过大，响应头可能无法容纳，可改用加密Cookie存储：

  // middleware.js中设置Cookie替代响应头
  response.cookies.set('global-data', serializedData, {
    httpOnly: true, // 提升安全性，防止XSS
    secure: process.env.NODE_ENV === 'production',
    path: '/',
    maxAge: 86400, // 有效期1天
  });
  // 读取时：Pages Router用context.req.cookies['global-data']；App Router用cookies().get('global-data')?.value
  

• 数据序列化：务必使用encodeURIComponent/decodeURIComponent处理，避免JSON解析错误。

内容的提问来源于stack exchange，提问作者Can Poyrazoğlu