Sling Academy
Home/Next.js/Next.js Warning: Extra attributes from the server [solved]

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

Last updated: June 14, 2023

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

Screenshot:

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).

Solutions

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,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <body suppressHydrationWarning={true}>{children}</body>
    </html>
  );
}

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!

Next Article: Next.js: You’re importing a component that needs useState

Previous Article: Next.js Error: Hooks are not Allowed in Server Components

Series: Common Errors in Next.js

Next.js

Related Articles

You May Also Like

  • Solving Next.js Image Component Error with CSS Classes
  • How to Use MUI (Material UI) in Next.js 14
  • Fixing Data Update Issues in Next.js Production
  • Fixing Next.js Undefined ENV Variables in Production Build
  • Solving Next.js SyntaxError: Unexpected token ‘export’
  • Next.js Error: Found Page Without a React Component as Default Export – How to Fix
  • Fixing Next.js Error: Blank Page on Production Build
  • Fixing Next.js Error when Importing SVGs: A Step-by-Step Guide
  • Next.js Issue: useEffect Hook Running Twice in Client
  • Fixing ‘self’ is not defined error in Next.js when importing client-side libraries
  • How to Dockerize a Next.js App for Production
  • How to set up Next.js with Docker Composer and Nginx
  • Solving Next.js CORS Issues: A Comprehensive Guide
  • Fixing Next.js Hydration Mismatch Error in Simple Ways
  • Next.js Error: Cannot use import statement outside a module
  • Next.js: How to Access Files in the Public Folder
  • Fixing Next.js Import CSS Error: A Simple Guide
  • Fixing LocalStorage Not Defined Error in Next.js
  • Fixing Next.js Error: No HTTP Methods Exported