Next.js 14 Root Layout实现首页与其他页面差异化导航栏

架构老林

2026-7-4

实现Next.js 14 Root Layout中导航栏的条件渲染

方法1：客户端路径检测（推荐）

由于Root Layout默认是服务端组件，无法直接使用客户端路由API，我们可以创建一个客户端组件来处理导航栏的条件渲染：

创建一个客户端导航栏包装组件：

'use client';
import { usePathname } from 'next/navigation';
import HomeNavbar from './HomeNavbar'; // 你的首页导航栏组件
import DefaultNavbar from './DefaultNavbar'; // 其他页面的导航栏组件

export default function ClientNavbar() {
  const pathname = usePathname();
  // 判断当前路径是否为首页
  return pathname === '/' ? <HomeNavbar /> : <DefaultNavbar />;
}

在Root Layout中导入并使用这个客户端组件：

import ClientNavbar from './ClientNavbar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>
          <ClientNavbar />
          {children}
        </main>
      </body>
    </html>
  );
}

方法2：服务端路径检测（动态布局）

如果你需要在服务端完成判断，可以使用headers()函数获取当前请求路径，但这会让Root Layout变为动态组件（无法静态生成）：

import { headers } from 'next/headers';
import HomeNavbar from './HomeNavbar';
import DefaultNavbar from './DefaultNavbar';

export default function RootLayout({ children }) {
  const headersList = headers();
  // 解析当前请求的路径
  const requestUrl = new URL(headersList.get('x-nextjs-url') || '');
  const isHomePage = requestUrl.pathname === '/';

  return (
    <html lang="en">
      <body>
        <main>
          {isHomePage ? <HomeNavbar /> : <DefaultNavbar />}
          {children}
        </main>
      </body>
    </html>
  );
}