Next.js 14布局如何向客户端侧边菜单传递用户角色？

方案1：在布局组件中统一获取角色并传递给客户端组件 #

Next.js 14的布局支持异步组件，直接在ProfileLayout中调用API获取用户角色，再通过props传给客户端组件ProfileSideMenu即可。这种方式既避免了子页面和侧边菜单重复调用API，也符合Next.js的数据获取最佳实践。

而且即使子页面原本也调用了相同的API，Next.js的自动缓存机制会确保实际只发起一次请求，不用担心性能问题。

修改后的代码示例：

// 假设你的API调用函数是getUserRole
import ProfileSideMenu from './ProfileSideMenu';

const ProfileLayout = async ({ children }: { children: ReactElement }) => {
  // 在布局中异步获取用户角色
  const userRole = await getUserRole();

  return (
    <div className='grid grid-cols-1 p-4'>
      <div className='grid grid-cols-8'>
        <div className='hidden md:block col-span-1'>
          <div className='grid grid-cols-4  h-full'>
            {/* 将角色通过props传递给客户端组件 */}
            <ProfileSideMenu role={userRole} />
            <Divider orientation='vertical' className='col-start-5 h-full' />
          </div>
        </div>
        <div className='grid col-span-8 md:col-span-7 p-5'>{children}</div>
      </div>
    </div>
  )
}

客户端组件ProfileSideMenu接收props：

'use client';

export default function ProfileSideMenu({ role }: { role: string }) {
  // 根据role渲染不同的菜单链接
  return (
    <div>
      {role === 'admin' && <a href='/admin/dashboard'>控制台</a>}
      {role === 'user' && <a href='/user/profile'>个人中心</a>}
    </div>
  )
}

方案2：使用React Context共享角色数据 #

如果你的应用中有多个客户端组件需要用到用户角色，可以通过React Context来全局共享数据，避免重复传递props。

1. 创建一个客户端Context组件：

'use client';

import { createContext, useContext } from 'react';

const UserRoleContext = createContext<string | null>(null);

export function UserRoleProvider({ children, role }: { children: React.ReactNode, role: string }) {
  return (
    <UserRoleContext.Provider value={role}>
      {children}
    </UserRoleContext.Provider>
  )
}

export function useUserRole() {
  return useContext(UserRoleContext);
}

2. 在布局组件中引入Provider并传入角色：

import { UserRoleProvider } from './UserRoleContext';
import ProfileSideMenu from './ProfileSideMenu';

const ProfileLayout = async ({ children }: { children: ReactElement }) => {
  const userRole = await getUserRole();

  return (
    <UserRoleProvider role={userRole}>
      <div className='grid grid-cols-1 p-4'>
        <div className='grid grid-cols-8'>
          <div className='hidden md:block col-span-1'>
            <div className='grid grid-cols-4  h-full'>
              <ProfileSideMenu />
              <Divider orientation='vertical' className='col-start-5 h-full' />
            </div>
          </div>
          <div className='grid col-span-8 md:col-span-7 p-5'>{children}</div>
        </div>
      </div>
    </UserRoleProvider>
  )
}

3. 在ProfileSideMenu中使用Context：

'use client';

import { useUserRole } from './UserRoleContext';

export default function ProfileSideMenu() {
  const role = useUserRole();
  if (!role) return null; // 处理角色未加载的情况

  return (
    <div>
      {role === 'admin' && <a href='/admin/dashboard'>控制台</a>}
      {role === 'user' && <a href='/user/profile'>个人中心</a>}
    </div>
  )
}

方案3：利用Next.js缓存允许重复调用API（可选） #

如果不想修改布局，也可以直接在ProfileSideMenu中调用相同的API。Next.js的缓存机制会自动复用之前的请求结果，不会重复发起网络请求，性能上几乎没有影响。这种方式适合场景简单的情况，代码改动最小。

客户端组件示例：

'use client';

import { useEffect, useState } from 'react';

export default function ProfileSideMenu() {
  const [role, setRole] = useState<string | null>(null);

  useEffect(() => {
    async function fetchRole() {
      // 调用和子页面相同的API，Next.js会缓存结果
      const res = await fetch('/api/user/role', { cache: 'force-cache' });
      const data = await res.json();
      setRole(data.role);
    }
    fetchRole();
  }, []);

  if (!role) return <div>加载中...</div>;

  return (
    <div>
      {role === 'admin' && <a href='/admin/dashboard'>控制台</a>}
      {role === 'user' && <a href='/user/profile'>个人中心</a>}
    </div>
  )
}

总结 #

优先推荐方案1，它代码简洁、逻辑清晰，能统一管理数据获取；如果有多个组件需要用到角色数据，选择方案2更合适；如果不想改动现有布局和子页面代码，方案3是最快捷的选择。

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