Next.js 13 App Router：如何为特定页面自定义body/html标签？

方法1：通过客户端组件动态修改body样式 #

嵌套布局无法直接访问根布局的<body>标签，你可以在目标页面的嵌套布局中添加客户端逻辑，利用useEffect操作DOM修改body样式：

修改app/myPage/[id]/layout.tsx为客户端组件（添加'use client'指令）：

'use client';

import { useEffect } from 'react';

export default function MyPageLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    // 给body添加overflow:hidden
    document.body.style.overflow = 'hidden';
    
    // 页面卸载时恢复原样式
    return () => {
      document.body.style.overflow = '';
    };
  }, []);

  return <div>{children}</div>;
}

该方式仅在进入目标页面时生效，离开页面会自动恢复body原有样式。

方法2：根布局结合路径判断动态设置样式 #

如果需要在根布局统一控制，可借助usePathname钩子判断当前路径，动态给body添加类名。由于根布局默认是服务器组件，需将路径判断逻辑抽为客户端组件：

1. 新建客户端组件app/components/BodyClassModifier.tsx：

'use client';

import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function BodyClassModifier() {
  const pathname = usePathname();
  
  useEffect(() => {
    const isTargetPage = pathname.startsWith('/myPage/');
    if (isTargetPage) {
      document.body.classList.add('overflow-hidden');
    } else {
      document.body.classList.remove('overflow-hidden');
    }
    
    return () => {
      document.body.classList.remove('overflow-hidden');
    };
  }, [pathname]);

  return null;
}

2. 在根布局中引入该组件：

import BodyClassModifier from './components/BodyClassModifier';

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  const session = await getServerSession(authOptions);

  return (
    <html lang="en" className={`bg-primary`}>
      <body>
        <BodyClassModifier />
        {children}
      </body>
    </html>
  );
}

3. 在全局CSS文件中定义样式类：

.overflow-hidden {
  overflow: hidden !important;
}

此方式适合需要统一管理多个页面body样式的场景。

方法3：CSS选择器结合路由属性（不推荐） #

Next.js会给页面根容器添加特定内部属性，可通过全局CSS直接匹配目标路径设置body样式：

/* 全局CSS文件中添加 */
[data-nextjs-scroll-focus-boundary][class*="myPage"] body {
  overflow: hidden;
}

注意：该方式依赖Next.js内部属性，版本更新可能导致失效，稳定性不如前两种方法。

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