Nextjs

How to fix the “Extra attributes from the server:” error in Nextjs

Why do we face the “Extra attributes from the server:” error, and what is the meaning?

Rajdeep Singh

Published in

FrontEnd web

3 min readApr 27, 2024

There are a bunch of errors that come into life when we work with nextjs. But if I say what is the most common error, every developer faces it once in a while.

Then I would say the most common error in nextjs is the “Extra attributes from the server:”.

What is the meaning of the “Extra attributes from the server:” error?

This error occurred because nextjs received an extra attribute from the server side it does not recognize on the client side.

In simple words, It creates a mismatch between the client and service sides.

Why do we face the “Extra attributes from the server:” error

There are multiple reasons why you face the “Extra attributes from the server:” error.

The most important and valid reasons are as follows:

Some browser extensions, such as Grammarly or colorzilla, add extra attributes on the client side, which causes the error.
Sometimes, installing extra libraries, such as chakra UI, gsap ScrollTrigger, next-themes, etc., causes this error based on your use.
We usually face this error due to the nesting element, such as nested ul elements within li elements.

What is the solution of “Extra attributes from the server:” error?

As I already told you, there are multiple reasons why the “Extra attributes from the server:” error occurs. That’s why it has various solutions, one of them can help you fix the issue.

To fix this issue, check out the following solution.

Avoid the use of nesting elements.
Turn off any browser extensions that may be adding attributes to HTML elements, or you can turn off all browser extensions.
If you are using a library that adds extra attributes to the HTML, you can try to find an alternative or different library to use it.
Nextjs clearly add which element caused this error and finds and fixes it.

There are some additional tips for fixing the “Extra attributes from the server” error:

Make sure you use the latest version of Next.js and reactjs.
Open the running website in incognito mode.
To tackle this issue, chrome has a new beta feature to turn off extensions for specific URLs, which helps to fix this error. Enable the extensions-menu-access-control flag from chrome://flags/#extensions-menu-access-control setting and restart chrome. Afterward, you can toggle or turn extensions on/off for that specific URL with the help of the extensions icon.

With nextjs, you can turn off warnings add the suppressHydrationWarning in nextjs layout.ts file.

// layout.ts 

export default RootLayout({ children }) {
  return (
    <html lang="en" className={customFont.variable}>
      <body
          suppressHydrationWarning={true} // This prevents extensions from causing a server/client mismatch
        >
          {children}
        </body>
      </html>
  )
}

Conclusion

I fixed this issue by enabling the experiment menu-access-control flag in Chrome. It works fine for me.
But there is a problem when you visit any website, you need to give access to your plugins every time again and again.

Note:
After turning off the experiment menu-access-control flag, my Chrome doesn’t work correctly.

My suggestion is now you use incognito mode is best to choose. Most of the time, I open the local development website in incognito mode during building and testing nextjs locally. It is the best solution for me.

To learn more about frontend developers, reactjs, nextjs, and Linux stuff, follow the frontend web publication on Medium and other updates. You can also follow me on Twitter (X) and Medium.