Fix: Warning: Extra attributes from the server: class, style
The Symptom
You boot up your Next.js application, and while the UI looks completely fine, your browser console is cluttered with an aggressive yellow warning. If you open the site in Incognito Mode, the error magically disappears.
Warning: Extra attributes from the server: class, style
at body
at html
at RootLayout
The Cure
This warning is almost always caused by third-party browser extensions modifying your DOM before React has a chance to hydrate. You must explicitly tell React to ignore attribute mismatches on your root tags.
Immediate Resolution:
Add the suppressHydrationWarning prop to both your <html> and <body> tags in your root layout.tsx.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
// 1. Add suppressHydrationWarning to HTML to fix theme extensions
<html lang="en" suppressHydrationWarning>
{/* 2. Add suppressHydrationWarning to BODY to fix UI extensions */}
<body suppressHydrationWarning>
{children}
</body>
</html>
);
}The Breakdown: Why Extensions Break Next.js
React Hydration is a strict, two-step process:
-
Step 1: The Node server renders the initial HTML and sends it to the browser. (e.g.,
<body>). -
The Sabotage: Before React wakes up to attach event listeners, browser extensions inject their own code. Grammarly injects `data-grammarly` attributes. Loom injects styles. Dark Reader forces background colors. The HTML is now mutated:
<body class="dark-reader-active" data-gramm=true>. - Step 2 (Hydration): React compares the server's clean HTML against the currently mutated browser DOM. It sees the injected classes/styles, panics because they don't match, and throws the console warning.
Adding suppressHydrationWarning to a tag specifically tells React: "Expect the attributes on this specific DOM node to mismatch. Do not throw a warning, and do not try to fix it."
Important Caveats
Do not abuse this prop. It should only be used on <html> and <body> tags, or highly specific elements (like a timestamp). Applying suppressHydrationWarning deep inside your component tree to mask actual rendering bugs will lead to unpredictable UI states and broken interactivity.
Loading logs...