Next.js 14 App Router：无需启用'use client'为body添加自定义类

你可以在RootLayout这个服务器组件中，通过获取当前请求的路径，结合路径映射表来为不同页面的body标签设置专属的类名和ID，全程不需要启用'use client'。

具体实现步骤： #

1. 在RootLayout中引入Next.js的headers()工具函数，用于获取当前请求的路径信息；
2. 定义一个路径与body配置（类名、ID）的映射表；
3. 根据当前路径匹配对应的配置，渲染到body标签上。

修改后的RootLayout代码： #

import Header from '@/components/Layout/Header/Header'
import Footer from '@/components/Layout/Footer/Footer'
import { headers } from 'next/headers'

// 配置不同路径对应的body类名和ID
const bodyConfigMap = {
  '/': { className: 'home-page', id: 'home-main' },
  '/example': { className: 'example-page', id: 'example-container' },
  '/example/example': { className: 'nested-example-page', id: 'nested-example-container' },
  // 可根据需求添加更多路径配置
}

export default function RootLayout({ children }) {
  const headersList = headers()
  // 从请求头中提取当前路径（去除查询参数）
  const pathname = headersList.get('next-url')?.split('?')[0] || '/'
  
  // 获取当前路径对应的配置，无匹配则用空值
  const { className = '', id = '' } = bodyConfigMap[pathname] || {}

  return (
    <html lang='en'>
      <body className={className} id={id}>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  )
}

扩展说明： #

• 这种方式完全在服务器端执行，不会增加客户端负担；
• 如果后续新增页面，只需要在bodyConfigMap中添加对应的路径和配置即可；
• 若需要更灵活的配置（比如让每个page组件自主定义body属性），也可以通过在page组件中导出自定义配置对象，结合服务器端动态导入的方式实现，但路径映射表的方法在大多数场景下更简洁高效。

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