What causes NextJS Warning: “Extra attributes from the server: data-new-gr-c-s-check-loaded… “

Question

This is caused by an extension passing these extra attributes with your code when it is executed on the browser trying to interact with the UI .

Extensions similar to Grammarly and LanguageTool are therefore the cause of this warning, so you have to find out which one is doing this then disable/configure it.

You can also prevent extensions from causing a mismatch by setting suppressHydrationWarning to true in the opening <body> tag of the RootLayout:

export default RootLayout({ children }) {
  return (
    <html lang="en" className={customFont.variable}>
      <body
          suppressHydrationWarning={true} 
        >
          {children}
        </body>
      </html>
  )
}

Sometimes you have to put it in the opening <html> tag

<html lang="en" suppressHydrationWarning={true}>

Leave a Comment Cancel reply