Next.js Warning: Extra attributes from the server [solved]

Updated: June 14, 2023 By: Khue 4 comments

This concise and straight-to-the-point article will show you some different ways to get rid of an annoying warning that often shows up in your console when working with Next.js 13 or above.

The Problem

The warning we’re talking about is long, red, and painful to see (even though it won’t prevent your app from working). Here it is:

Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen


This problem occurs not because of your fault or something wrong with your code but because of one or more extensions installed on your browser (especially extensions that can read and modify the web page you’re viewing).


There is more than one approach to solving the issue.

Use the Incognito mode of your web browser

In incognito mode (private mode), your app will not be interfered by browser extensions, thus the warning won’t show up, and your console will be clean:

You can open your browser in incognito mode by pressing Ctrl + Shift + N (Windows) or Cmd + Shift + N (Mac).

Use the suppressHydrationWarning props

Another way to prevent the mentioned warning is to set the suppressHydrationWarning props of the <body> tag in your root layout to True as shown below:

// Root Layout (app/layout.tsx)

export default function RootLayout({
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <body suppressHydrationWarning={true}>{children}</body>

The clunky method

This method is not very bright but still works, it is temporarily disabling or removing extensions on your browser or simply using another browser (the one without the extensions installed). Either way, I don’t think you’ll like this method as much as either of the previous two.

Happy coding & have a nice day!

Newest Most Voted
Inline Feedbacks
View all comments