在 next.js 中直接将 `next/font` 生成的 classname 应用于 `` 标签会导致服务端与客户端渲染不一致，从而触发 hydration error；正确做法是将字体类名应用在 `
` 或组件内容器上，并确保字体加载逻辑符合 ssr/ssg 渲染流程。Next.js 的 next/font（如 Lexend）是专为现代 React Server Components 设计的零布局偏移（FOIT/FOUT-free）字体加载方案，但它不能直接挂载到 <html> 或 <body> 标签上——因为这些标签由 Next.js 的根布局（如 app/layout.tsx）统一控制，而 next/font 生成的 className 包含动态注入的 @font-face 规则和唯一哈希类名，其 CSS 注入时机和服务端静态生成的 HTML 结构存在生命周期错位，极易引发 Hydration mismatch。
✅ 正确用法：将字体类名应用于 <body> 的包裹容器（推荐在 app/layout.tsx 中）
// app/layout.tsx
import { Lexend } from 'next/font/google';
const lexend = Lexend({
subsets: ['latin'],
variable: '--font-lexend' // 可选：启用 CSS 变量支持
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={lexend.className}> {/* ✅ 正确：应用在 body 内的顶层容器 */}
<div className="min-h-screen bg-white">
{children}
</div>
</body>
</html>
);
}⚠️ 注意事项：
- ❌ 不要将 lexend.className 写在 <html> 标签上（如 <html lang="en" className={lexend.className}>），这会破坏服务端预渲染的 HTML 结构一致性；
- ❌ 不要在客户端组件（'use client'）中动态调用 Lexend() —— 字体必须在服务端或 RSC 环境中提前声明；
- ✅ 若需局部字体作用域（例如仅某页面使用），可在该页面的 Server Component 中导入并应用到 <main> 或 <div> 容器；
- ✅ 推荐配合 variable 配置使用 CSS 变量，在样式中灵活切换：
h1 { font-family: var(--font-lexend); }
? 补充调试技巧：
若仍出现 Hydration 警告，请检查是否在组件中混用了 useState / useEffect 初始化字体逻辑（next/font 必须纯声明式、无副作用）。所有字体实例应在模块顶层定义，而非函数内部。
总结：Next.js 字体集成的核心原则是——声明即应用，作用域即容器。把 className 放进 body 或语义化容器中，远离 <html> 标签，即可彻底规避 Hydration error，同时享受自动优化的字体加载体验。
