Next.js根布局中如何区分根页面与NotFound页面？

你的问题出在判断条件包含了!path，导致NotFound页面（此时next-url返回null）会误触发首页的样式逻辑。以下是几种准确区分根页面、NotFound页面及其他场景的方法：

1. 最简单的修复：严格匹配根路径 #

直接移除!path的判断，仅当路径严格等于/时应用首页样式。这样NotFound页面（path为null）和其他页面都会使用默认样式：

const path = headers().get("next-url");
let top_margin = "mt-[70px]",
    content_padding = "p-2 pt-3";
// 仅根页面应用特殊样式
if (path === "/") {
    top_margin = "mt-[120px]";
    content_padding = "";
}

2. 服务端组件：通过完整URL解析路径 #

如果next-url在某些场景下存在异常，可通过构建完整URL来解析准确路径，避免依赖单一header的不确定性：

import { headers } from 'next/headers';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const headersList = headers();
  const host = headersList.get('host') || '';
  const protocol = headersList.get('x-forwarded-proto') || 'http';
  const nextUrl = headersList.get('next-url');
  
  // 解析当前路由路径
  const pathname = nextUrl 
    ? new URL(`${protocol}://${host}${nextUrl}`).pathname 
    : '/';

  let top_margin = "mt-[70px]",
      content_padding = "p-2 pt-3";
  
  if (pathname === "/") {
    top_margin = "mt-[120px]";
    content_padding = "";
  }

  return (
    <html lang="zh-CN">
      <body className={`${top_margin} ${content_padding}`}>
        {children}
      </body>
    </html>
  );
}

3. 客户端组件：使用usePathname钩子 #

若你的布局允许改为客户端组件，使用Next.js提供的usePathname钩子能直接获取当前路由路径，完全避免header带来的问题：

'use client';

import { usePathname } from 'next/navigation';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  
  let top_margin = "mt-[70px]",
      content_padding = "p-2 pt-3";
  
  if (pathname === "/") {
    top_margin = "mt-[120px]";
    content_padding = "";
  }

  return (
    <html lang="zh-CN">
      <body className={`${top_margin} ${content_padding}`}>
        {children}
      </body>
    </html>
  );
}

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