Next.js中如何隐式传递页面Props至所有子组件（AWS Amplify环境）

完全可以通过React Context实现，而且和AWS Amplify环境没有冲突，Amplify不会干扰React Context的正常工作。下面是具体的实现步骤：

1. 创建用户Context #

先定义一个专门存储用户数据的Context，同时封装一个自定义钩子方便子组件调用：

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

// 初始化Context，默认值设为null
const UserContext = createContext(null);

// 定义Provider组件，用来包裹需要共享user的组件树
export const UserProvider = ({ children, user }) => {
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义钩子，简化子组件获取user的逻辑
export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) {
    throw new Error('useUser必须在UserProvider内部使用');
  }
  return context;
};

2. 在页面中用Provider包裹子组件 #

在通过getServerSideProps获取user的Home页面，把UserProvider套在所有子组件外面，将getServerSideProps拿到的user传入Provider：

// pages/index.js
import { UserProvider } from '../contexts/UserContext';
import Component1 from '../components/Component1';
import Component2 from '../components/Component2';
import Component3 from '../components/Component3';

export async function getServerSideProps(context) {
  // 这里可以结合Amplify Auth获取用户，比如：
  // import { Auth } from 'aws-amplify';
  // const user = await Auth.currentAuthenticatedUser();
  // 也可以是你自己的业务逻辑获取的user数据
  const user = { id: 'u_123', nickname: '测试用户' };
  
  return {
    props: { user },
  };
}

export default function Home({ user }) {
  return (
    <UserProvider user={user}>
      <Component1 />
      <Component2 />
      <Component3 />
    </UserProvider>
  );
}

3. 子组件直接获取user #

不管是Component1、Component2这类一级子组件，还是它们内部嵌套的深层子组件，都可以通过useUser钩子直接拿到user，不用逐层传参：

// components/Component1.js
import { useUser } from '../contexts/UserContext';
import Component1Child from './Component1Child';

export default function Component1() {
  const user = useUser();
  return (
    <div>
      <p>当前用户名：{user.nickname}</p>
      <Component1Child />
    </div>
  );
}

// components/Component1Child.js
import { useUser } from '../contexts/UserContext';

export default function Component1Child() {
  const user = useUser();
  return <p>嵌套子组件获取用户ID：{user.id}</p>;
}

Amplify环境的注意事项 #

• 如果你的user是通过Amplify Auth的Auth.currentAuthenticatedUser()获取的，在getServerSideProps中调用完全可行，Amplify支持在SSR环境下获取认证用户信息。
• Amplify自身提供了useAuthenticator等钩子，但如果你是自定义的user数据（比如从数据库获取的用户详情），用React Context是更灵活的方案，和Amplify的Auth功能可以共存，互不影响。

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