NextJS控制台警告：服务器返回额外属性问题及解决方法

控制台出现的警告内容：

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed at body at html and blah-blah

这类警告一般是浏览器第三方扩展（如Grammarly）向页面的html、body标签注入了额外属性，导致React在hydration过程中检测到服务端与客户端的属性不匹配。

解决方案是在RootLayout的html和body标签上添加suppressHydrationWarning属性，让React忽略这类属性不匹配的警告：

export default function RootLayout({ children }) {
    return (
        <html lang="en" suppressHydrationWarning>
            <body className={inter.className} suppressHydrationWarning>{children}</body>
        </html>
    );
}

内容的提问来源于stack exchange，提问作者Mister X.