Next.js非根路径页面<html>元素出现空style=""标签原因咨询

问题现象 #

通过客户端路由跳转进入Next.js的非根路径页面时，<html>元素会被添加一个空的style=""标签；但直接访问该非根路径页面时，这个空标签不会出现，且官方文档未提及此行为。

复现步骤 #

• 打开示例站点
• 点击页面内的「about」链接进行路由跳转
• 打开浏览器开发者工具，检查<html>元素即可看到空的style=""标签

原因解析 #

这是Next.js客户端路由导航时的一个DOM遗留行为：

• 客户端路由跳转过程中，框架会尝试为<html>元素临时创建style标签，用于处理页面间的样式过渡、隔离或动态样式注入逻辑。如果当前页面没有需要注入的实际样式，这个标签就会被留空。
• 直接访问非根路径页面属于服务端渲染（SSR）场景，页面样式在服务端就已完成预注入，不会触发客户端的临时样式处理流程，因此不会产生空标签。

处理方案 #

这个空标签不会影响页面功能，若需清理，可在客户端路由跳转完成后手动移除：

Pages Router 方案（_document.js）

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  componentDidMount() {
    const htmlEl = document.querySelector('html');
    if (htmlEl.hasAttribute('style') && htmlEl.getAttribute('style') === '') {
      htmlEl.removeAttribute('style');
    }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

App Router 方案（layout.js）

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function RootLayout({ children }) {
  useEffect(() => {
    const cleanEmptyStyle = () => {
      const htmlEl = document.querySelector('html');
      if (htmlEl?.style?.length === 0) {
        htmlEl.removeAttribute('style');
      }
    };

    // 初始加载后清理
    cleanEmptyStyle();
    // 监听路由跳转完成事件，清理空标签
    const router = useRouter();
    const handleRouteChange = () => setTimeout(cleanEmptyStyle, 100);
    router.events.on('routeChangeComplete', handleRouteChange);

    return () => router.events.off('routeChangeComplete', handleRouteChange);
  }, []);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

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