Next.js 14项目结构调整：实现主站与Panel页面头部差异化显示

在Next.js 14的App Router中，最清晰且符合官方最佳实践的方式是利用路由分组和嵌套布局来实现这个需求，以下是具体方案：

一、调整项目路由结构 #

将主站页面（首页、about等）和Panel页面拆分为独立的路由分组，让各自使用不同的布局文件：

app/
├── (main)/               # 主站路由组，括号表示这是一个逻辑分组，不会出现在URL中
│   ├── layout.tsx        # 带头部的主站专属布局
│   ├── page.tsx          # 首页（对应 site.com/）
│   └── about/
│       └── page.tsx      # about页面（对应 site.com/about）
├── panel/
│   ├── layout.tsx        # Panel专属布局（不带头部）
│   ├── page.tsx          # Panel首页（对应 site.com/panel）
│   └── settings/
│       └── page.tsx      # Panel设置页（对应 site.com/panel/settings）
└── layout.tsx            # 根布局，仅保留全局通用内容

二、编写各布局文件 #

1. 根布局（app/layout.tsx） #

只保留所有页面都需要的基础内容，比如全局样式、<html>和<body>标签，不要在这里放置头部组件：

import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

2. 主站布局（app/(main)/layout.tsx） #

导入头部组件，包裹主站所有页面的内容：

import Header from '@/components/Header';

export default function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <Header />
      <main className="main-container">{children}</main>
    </>
  );
}

3. Panel布局（app/panel/layout.tsx） #

直接渲染Panel页面内容，不需要引入头部组件：

export default function PanelLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <main className="panel-container">{children}</main>
  );
}

备选方案：路径判断法 #

如果不想调整路由结构，也可以在根布局中通过路径判断控制头部显示，但需要启用客户端组件（因为用到路由钩子）：

'use client';
import { usePathname } from 'next/navigation';
import Header from '@/components/Header';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  // 判断当前路径是否以/panel开头，是则不显示头部
  const showHeader = !pathname.startsWith('/panel');

  return (
    <html lang="zh-CN">
      <body>
        {showHeader && <Header />}
        {children}
      </body>
    </html>
  );
}

方案对比 #

• 路由分组法：结构清晰，维护方便，完全遵循App Router的设计理念，服务端优先渲染，推荐使用。
• 路径判断法：无需调整现有结构，但依赖客户端钩子，适合小型项目或临时需求。

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