如何在Next.js的不同函数与组件中访问getServerSideProps的context？

从CRA迁移到Next.js时，SSR场景下getServerSideProps的context需要逐层传递给深层函数/组件确实很繁琐，给你几个实用的解决思路：

1. 用React Context封装服务端数据 #

把getServerSideProps中需要用到的context数据（比如cookies、URL参数、路由params）提取出来，通过React Context共享，深层组件/函数直接通过useContext获取，不用手动传参。

示例代码：

// 创建Context文件（比如src/contexts/ServerDataContext.js）
import { createContext, useContext } from 'react';

const ServerDataContext = createContext(null);

export const ServerDataProvider = ({ children, serverData }) => {
  return (
    <ServerDataContext.Provider value={serverData}>
      {children}
    </ServerDataContext.Provider>
  );
};

export const useServerData = () => {
  const context = useContext(ServerDataContext);
  if (!context) {
    throw new Error('useServerData must be used within a ServerDataProvider');
  }
  return context;
};

然后在页面组件中使用：

import { ServerDataProvider, useServerData } from '../contexts/ServerDataContext';

// 深层组件，无需接收context参数
const DeepChildComponent = () => {
  const { cookies, query } = useServerData();
  // 直接使用数据
  return <div>当前用户ID：{query.userId}</div>;
};

// 深层函数，同样通过Hook获取数据
const deepChildFunction = () => {
  const { cookies } = useServerData();
  // 处理逻辑
  return cookies.authToken;
};

export default function MyPage({ serverData }) {
  return (
    <ServerDataProvider serverData={serverData}>
      <DeepChildComponent />
    </ServerDataProvider>
  );
}

export async function getServerSideProps(context) {
  // 只提取需要的部分，不要传递整个context
  const serverData = {
    cookies: context.req.cookies,
    query: context.query,
    params: context.params
  };
  return { props: { serverData } };
}

2. 集中处理服务端逻辑，避免深层依赖 #

尽量把需要context的逻辑都放在getServerSideProps里完成，把处理后的结果传给页面组件，深层组件只负责渲染拿到的结果，不需要接触context。

比如：

export async function getServerSideProps(context) {
  // 在这层完成所有需要context的逻辑：获取用户信息、数据查询等
  const userInfo = await fetchUserByCookie(context.req.cookies.authToken);
  const pageData = await fetchPageData(context.query.pageId);
  
  // 把最终结果传给页面
  return { props: { userInfo, pageData } };
}

// 深层组件直接接收处理好的数据，不用管context
const DeepChild = ({ userInfo }) => {
  return <div>用户名：{userInfo.name}</div>;
};

3. 自定义Hook封装数据获取（针对函数场景） #

如果有深层函数需要用到服务端数据，可以把数据通过Context共享后，用自定义Hook封装获取逻辑，函数直接调用Hook拿到数据，不用传参：

// 自定义Hook
export const useAuthToken = () => {
  const { cookies } = useServerData();
  return cookies.authToken;
};

// 深层函数直接用Hook
const fetchPrivateData = async () => {
  const authToken = useAuthToken();
  const res = await fetch('/api/private', {
    headers: { Authorization: `Bearer ${authToken}` }
  });
  return res.json();
};

这样不管层级多深，都不用手动传递context，只需要通过Context或Hook获取需要的数据即可。

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