Next.js App Router服务端路由切换时为<body>设置主题类名

要解决服务端渲染时给每个动态页面设置对应<body>主题、避免路由切换闪烁的问题，推荐直接在Root Layout中做服务端动态处理，具体步骤如下：

核心思路 #

Root Layout作为服务端组件，可通过usePathname获取当前路由路径，解析出动态参数[page]，再请求CMS获取对应页面的主题数据，最后直接给<body>绑定主题类名。这种方式能确保预渲染的HTML中就包含正确的主题类，完全避免客户端切换时的闪烁问题。

实现代码 #

1. 编写Root Layout（app/layout.js） #

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

// 封装服务端函数，根据页面slug获取主题
const fetchPageTheme = cache(async (pageSlug) => {
  // 替换为你的CMS接口请求逻辑
  const res = await fetch(`https://your-cms-api.com/pages/${pageSlug}`, {
    // 根据页面渲染策略设置缓存：静态页面用force-cache，动态页面用no-store
    cache: pageSlug === 'home' ? 'force-cache' : 'no-store',
  });
  
  if (!res.ok) throw new Error('Failed to fetch page theme');
  const pageData = await res.json();
  return pageData.theme; // 假设CMS返回的主题字段是theme，比如"dark"、"light"
});

export default async function RootLayout({ children }) {
  const pathname = usePathname();
  // 解析路由中的动态参数：比如路径为/about时，pageSlug是about；根路径默认用home
  const pageSlug = pathname === '/' ? 'home' : pathname.slice(1);
  
  // 服务端获取主题
  const theme = await fetchPageTheme(pageSlug);

  return (
    <html lang="zh-CN">
      {/* 直接在服务端给body绑定主题类 */}
      <body className={`theme-${theme}`}>{children}</body>
    </html>
  );
}

2. 动态页面适配（app/[page]/page.js） #

如果你的动态页面是静态生成的，记得在页面中导出generateStaticParams预生成所有路由，确保Root Layout能获取到对应静态页面的主题：

export async function generateStaticParams() {
  // 从CMS获取所有页面的slug
  const pages = await fetch('https://your-cms-api.com/pages', { cache: 'force-cache' }).then(res => res.json());
  return pages.map(page => ({ page: page.slug }));
}

export default async function DynamicPage({ params }) {
  const { page } = params;
  // 获取页面内容数据（和主题请求可以合并，减少接口调用）
  const pageData = await fetch(`https://your-cms-api.com/pages/${page}`, { cache: 'force-cache' }).then(res => res.json());

  return (
    <div className="page-content">
      {/* 页面内容渲染 */}
      <h1>{pageData.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: pageData.content }} />
    </div>
  );
}

关键注意事项 #

• 缓存策略：根据页面是静态生成还是动态渲染，给fetch设置对应的cache参数，避免不必要的重复请求，同时保证动态页面能实时获取最新主题。
• 路由参数解析：注意处理根路径（/）的情况，避免解析出空的pageSlug导致请求失败。
• 错误处理：可以给fetchPageTheme添加错误捕获，比如默认返回light主题，避免页面渲染失败。

替代方案（不推荐，仅作补充） #

如果Root Layout的缓存策略不好调整，也可以在动态页面中用useServerInsertedHTML在服务端插入脚本，强制给body添加主题类：

import { useServerInsertedHTML } from 'next/navigation';

export default async function DynamicPage({ params }) {
  const { page } = params;
  const pageData = await fetch(`https://your-cms-api.com/pages/${page}`).then(res => res.json());
  const theme = pageData.theme;

  useServerInsertedHTML(() => (
    <script dangerouslySetInnerHTML={{ __html: `document.body.classList.add('theme-${theme}');` }} />
  ));

  return <div>{/* 页面内容 */}</div>;
}

这种方式虽然能实现，但脚本是在浏览器加载后执行，会有极轻微的闪烁，不如Root Layout直接设置class的方案彻底。

内容的提问来源于stack exchange，提问作者Oskar Engström