Next.js 14.2.3路径级layout.tsx样式刷新后不持久问题

在Next.js 14.2.3中，根目录的layout.tsx设置的全局样式可正常生效；但在子路径层级添加的layout.tsx，样式仅在热重载时显示，手动刷新页面、启停应用或执行yarn build && yarn start后样式消失。

全局生效的目录结构 #

src
  app
    (main)
      page.tsx
    (auth)
      login
        page.tsx
  layout.tsx

路径级仅热重载生效的目录结构 #

src
  app
    (main)
      page.tsx
    (auth)
      login
        page.tsx
        layout.tsx // 此处样式仅热重载时生效
      register
        page.tsx
        layout.tsx // 此处样式仅热重载时生效
    layout.tsx // 此处样式仅热重载时生效
  layout.tsx // 当前无样式，添加后可生效

根级别layout.tsx代码（正常生效） #

import type { Metadata } from "next";
import { Open_Sans } from "next/font/google";
import "./globals.css";
import React from "react";

const font = Open_Sans({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "App",
  description: "App description",
};

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

路径级layout.tsx代码（仅热重载生效） #

import React from "react";

const AuthLayout = ({
  children,
}: { children: React.ReactNode }) => (
  <html lang="en">
    <body className="bg-amber-400 text-center mt-4">
      {children}
    </body>
  </html>
);
export default AuthLayout

页面组件示例（LoginPage） #

const LoginPage = () => {
    return (
        <div>
          Login
        </div>
    );
};
   
export default LoginPage;

这是Next.js App Router的明确规则限制：只有根层级的layout.tsx可以返回<html>和<body>标签，所有子路由的layout组件（包括app/(auth)/login/layout.tsx这类路径级的layout）都不能包含这两个顶级标签。

开发环境的热重载存在临时兼容处理，让错误的layout代码暂时生效，但在生产构建（yarn build）或页面刷新时，Next.js会严格遵循路由规则，子layout中的<html>/<body>标签会被忽略或与根layout的标签冲突覆盖，导致样式失效。

正确的子layout写法应该只返回包裹内容的容器元素，示例如下：

import React from "react";

const AuthLayout = ({
  children,
}: { children: React.ReactNode }) => (
  <div className="bg-amber-400 text-center mt-4">
    {children}
  </div>
);
export default AuthLayout

修改后，子layout的样式在生产环境和页面刷新后都能正常生效。

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