NextJs报错，Warning: Extra attributes from the server: xxx
Wed Aug 28 2024
next打开项目发现项目中出现警告Warning: Extra attributes from the server: class,style
但是不影响项目启动，查看原因后发现是是 Nextjs 在渲染页面时，会将服务端返回的 HTML 字符串与客户端渲染的 HTML 字符串进行对比，如果发现有不一致的地方，就会在控制台输出警告。
大部分的原因是因为浏览器扩展导致的，有一些扩展会在 html 或者 body 标签注入一些额外的属性，导致在 hydration 时出现不一致的情况。
可以通过禁用浏览器扩展来解决这个问题，或者通过 React 官方提供的配置来隐藏这个警告。
通过在 body 标签或者 html 标签配置 suppressHydrationWarning 属性解决了这个问题。
1export default function RootLayout({
2 children,
3}: Readonly<{
4 children: React.ReactNode;
5}>) {
6 return (
7 <html lang="en" suppressHydrationWarning>
8 <body
9 className={`${fira.className} h-full bg-amber-50 text-indigo-950 dark:bg-slate-950 dark:text-amber-50 dark:selection:bg-purple-500`}
10 >
11 <ThemeProvider
12 attribute="class"
13 defaultTheme="dark"
14 enableSystem
15 disableTransitionOnChange
16 >
17 <Navbar />
18 <main className="mx-auto max-w-5xl px-6">{children}</main>
19 </ThemeProvider>
20 </body>
21 </html>
22 );
23}
24