Next.js主详情页布局问题：未选客户时详情区需显示占位符

问题根源 #

访问/portal/customers时，customers/page.tsx的内容会作为children传入CustomersLayout的detail属性。如果你的customers/page.tsx原本也渲染客户列表，就会导致左侧主区域和右侧详情区显示重复内容。

方案一：直接修改根客户页为占位符 #

这是最简单的新手友好方案：

1. 创建空占位符组件
   在portal/customers目录下新建EmptyDetail.tsx：

export default function EmptyDetail() {
  return (
    <div className="flex items-center justify-center h-full text-gray-500">
      请选择一个客户查看详情
    </div>
  );
}

2. 替换customers/page.tsx内容
   把原有的客户列表代码替换成占位符：

import EmptyDetail from './EmptyDetail';

export default function CustomersPage() {
  return <EmptyDetail />;
}

这样访问/portal/customers时，右侧详情区就会显示提示文本，不再重复列表。

方案二：在布局中动态判断路由参数 #

如果不想修改customers/page.tsx，可以利用Next.js的路由参数判断，动态切换详情内容：

1. 修改CustomersLayout组件
   引入useParams钩子并添加判断逻辑：

import { useParams } from 'next/navigation';
import EmptyDetail from './EmptyDetail';

export default function CustomersLayout({ children }: { children: React.ReactNode }) {
  const params = useParams();

  // 当路由中没有id参数时，显示占位符
  const detailContent = params.id ? children : <EmptyDetail />;

  return (
    <MasterDetailLayout
      master={<CustomerList />}
      detail={detailContent}
    ></MasterDetailLayout>
  );
}

这种方式更灵活，无需改动根客户页，直接在布局层面处理不同路由场景的内容展示。

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