Elements部分，你可以找到那些额外的属性。
好知道：
您可以通过在RootLayout的开头<body>标签中将suppressHydrationWarning设置为true来抑制水合警告。
export default RootLayout({ children }) {
return (
<html lang="en">
<body suppressHydrationWarning={true}>
{children}
</body>
</html>
)
}
<html> 标签中。<html lang="en" suppressHydrationWarning={true}>
suppresshydrationwarning 只能在一层深度上起作用，所以如果你把它放在 <html> 元素中，它不会抑制 <body> 元素的 hydration 警告，因为它在更深的层级上，这很好！因为我们不想抑制位于更深层级的服务器组件的水合警告。
chrome://flags/#extensions-menu-access-control来启用此标志，并重新启动Chrome。http://localhost:3000 URL，以关闭该URL（仅限该URL）的扩展程序！不需要上面提到的suppressHydrationWarning={true}属性。
此警告信息表明 Next.js 从服务器接收到的 HTML 元素上有一些额外的属性，它不认识这些属性。
这些属性是由各种浏览器扩展程序、插件或工具栏添加到页面的 HTML 中的。
在您的情况下，属性 data-new-gr-c-s-check-loaded，data-gr-ext-installed 和 cz-shortcut-listen 可能是一个或多个安装在浏览器中的浏览器扩展添加的。Next.js 不认识这些属性，因此会发出警告。
要消除警告，您可以使用元素上的 dangerouslySetInnerHTML 属性来过滤掉 next.js 不认识的 data-* 属性。
<div
dangerouslySetInnerHTML = {{
__html: htmlString.replace(
/ data-(?!react[\w-]+=)[\w-]+="[^"]*"/g,
''
),
}}
/>
dangerouslySetInnerHTML？我是不是应该在 layout.tsx(_app.tsx)中的 <body> 标签上这样做？由于我真的不知道浏览器扩展可以注入这些属性到哪里，那我应该用什么替换 htmlString 呢？ - Carven您在JavaScript控制台中看到的警告消息，具体来说：
警告：来自服务器的额外属性：cz-shortcut-listen...
与服务器发送的一些属性相关，您的代码可能无法正确处理或预期。这个警告通常不是关键问题，不会阻止您的应用程序运行，但是为了确保代码保持干净和可维护，解决这个问题是一个好习惯。
临时禁用浏览器扩展，除了开发所需的扩展之外。浏览器扩展有时会干扰Web应用程序的行为，包括修改网络请求的内容或向HTML元素中注入额外的属性。
或者
在<body>的开标签中添加suppressHydrationWarning={true}。
示例：<body className={inter.className} suppressHydrationWarning={true}> 您的代码</body>
suppressHydrationWarning只能在一层深度起作用，所以如果你将其放在 body 元素中，它不应该影响位于更深层级的服务器组件。 - undefined<body suppressHydrationWarning={true}>运行良好 - xgqfrms