Next.js App Router：如何仅在首页路由的Layout头部前添加元素？

方法一：在根Layout中判断路由（推荐） #

直接在根layout.tsx里通过当前路由路径判断，只在首页渲染目标div，其他路由自动隐藏。

1. 导入usePathname钩子（Next.js App Router提供的路由工具）
2. 在Header组件前添加条件渲染逻辑

// app/layout.tsx
import { usePathname } from 'next/navigation';
import Header from './components/Header'; // 替换为你的Header组件路径
import Footer from './components/Footer'; // 替换为你的Footer组件路径

export default function RootLayout({ children }) {
  const pathname = usePathname(); // 获取当前路由路径

  return (
    <html lang="zh-CN">
      <body>
        {/* 仅在首页("/")显示的div */}
        {pathname === '/' && <div className="home-only-div">这里是首页专属内容</div>}
        
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

这个方案不需要改动现有目录结构，逻辑直接清晰，所有路由共用同一个根Layout，仅根据路径动态控制div的显示。

方法二：给首页单独设置嵌套Layout（适合复杂场景） #

如果不想在根Layout里加路由判断，可以通过嵌套Layout实现：

1. 调整目录结构：

app/
├── layout.tsx       # 根Layout（仅包含Header、main、Footer）
├── page.tsx         # 重定向到首页
├── home/
│   ├── layout.tsx   # 首页专属Layout（添加目标div）
│   └── page.tsx     # 首页内容
└── about/
    └── page.tsx     # 关于页内容

2. 根layout.tsx代码（去掉Header前的额外内容）：

// app/layout.tsx
import Header from './components/Header';
import Footer from './components/Footer';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <Header />
        <main>{children}</main>
        <Footer />
      </body>
    </html>
  );
}

3. 首页专属home/layout.tsx：

// app/home/layout.tsx
export default function HomeLayout({ children }) {
  return (
    <>
      <div className="home-only-div">这里是首页专属内容</div>
      {children}
    </>
  );
}

4. 根page.tsx做重定向：

// app/page.tsx
import { redirect } from 'next/navigation';

export default function RootPage() {
  redirect('/home');
}

这个方案适合首页有特殊布局需求的场景，但需要调整目录和添加重定向，不如方法一简洁。

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