Next.js最新App Router字体消失问题求助

问题根源 #

你在App Router中同时定义了根布局（app/layout.tsx）和菜单页布局（如app/menu/layout.tsx），两个布局都渲染了<html>和<body>标签。通过客户端路由切换页面时，这种重复定义会导致<body>上的字体变量className被覆盖或丢失，最终引发字体失效。

修复步骤 #

1. 保留根布局作为全局入口 #

根布局app/layout.tsx是App Router的全局布局，所有页面都会继承它，只需在这里统一配置字体变量、全局样式和基础标签：

// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { kaushanVar, robotoVar } from "@/utils/fonts";

export const metadata: Metadata = {
  title: "Leaf Llama",
  description: "Lettuce eat!",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={`${robotoVar} ${kaushanVar}`}>
        {children}
      </body>
    </html>
  );
}

2. 修改菜单页布局为嵌套布局 #

菜单页的布局不需要重新定义<html>和<body>，只需作为嵌套布局添加Navbar等局部内容：

// app/menu/layout.tsx
import Navbar from "@/components/Navbar";

export default function MenuLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <Navbar />
      {children}
    </>
  );
}

3. 确认Tailwind配置不变 #

你的Tailwind配置已经正确关联了字体变量，无需修改：

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  mode: 'jit',
  theme: {
    extend: {
      fontFamily: {
        'roboto': ['var(--font-roboto)'],
        'kaushan': ['var(--font-kaushan)']
      },
    },
  },
  plugins: [],
};
export default config;

原理说明 #

App Router的布局是嵌套继承的：根布局提供最外层的<html>和<body>，子目录的布局只负责包裹该目录下的页面内容，不会覆盖根布局的基础标签。这样字体变量会始终存在于<body>上，无论页面如何切换都不会丢失。

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