Extra attributes from the server in Next.js

Problem Statement

When developing Next.js applications, you might encounter this console warning:

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

This occurs when browser extensions inject extra HTML attributes into your application's root elements during development. Next.js compares server-rendered HTML with client-rendered DOM and flags these unexpected attributes, causing a hydration mismatch. Common extensions causing this are Grammarly, ColorZilla, and LanguageTool.

Solutions

Primary Fix: Browser Extensions

The most reliable solution is to disable problematic browser extensions for your development environment. Identified culprits:

Grammarly: Adds data-gr-ext-installed, data-new-gr-c-s-check-loaded
ColorZilla: Adds cz-shortcut-listen
LanguageTool: Adds data-lt-installed

markdown

::: tip Steps to disable extensions:
1. Open Chrome extension manager: `chrome://extensions`
2. Identify problematic extensions (use abbreviation hints in attributes)
3. Toggle them off OR configure site-specific access (see next section)
:::

Control Extensions for Localhost

Chrome supports disabling extensions only for localhost:

Enable Chrome flag: Navigate to chrome://flags/#extensions-menu-access-control
Relaunch Chrome
Click the extensions icon while on localhost:3000
Toggle off extensions only for this site

Temporary Suppression (Development Only)

For hydrating the root <html> or <body> tags only (not recommended for production):

jsx

// In app/layout.jsx
export default function RootLayout({ children }) {
  const isDev = process.env.NODE_ENV === 'development';
  
  return (
    <html lang="en" suppressHydrationWarning={isDev}>
      <body suppressHydrationWarning={isDev}>
        {children}
      </body>
    </html>
  );
}

WARNING

suppressHydrationWarning only works one level deep. Using it on <html> won't suppress errors for <body> or child components. Overuse can mask legitimate hydration bugs.

Other Edge Cases

GSAP Libraries: If using GSAP animations, register plugins properly to avoid conflicts:

// utils/useIsomorphicLayoutEffect.js
import { useLayoutEffect, useEffect } from "react";
export default typeof window !== "undefined" ? useLayoutEffect : useEffect;

jsx

"use client";
import useIsomorphicLayoutEffect from "@/utils/useIsomorphicLayoutEffect";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

const RegisterComponent = () => {
  useIsomorphicLayoutEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
  }, []);
  return null;
};

export default function AnimationContainer() {
  return (
    <div>
      <RegisterComponent />
      {/* Your components */}
    </div>
  );
}

Multiple Root Elements: Avoid nested html/body tags in layout files:

diff

- // ❌ In child layout.js
- export default function Layout() { return <html>...</html> }

+ // ✅ Only root layout should contain <html>/<body>

Explanation

Browser extensions modify DOM elements by adding attributes like data-gr-ext-installed, causing a mismatch between:

Server-rendered HTML (no extension attributes)
Client-side hydrated DOM (with extension attributes)

Next.js flags this during hydration, a critical React process that reconciles server and client outputs. While warnings don't break functionality, ignoring them may hide actual hydration bugs.

Best Practices

Test incognito: Extensions don't load in private modes
Avoid suppression in production: Only use suppressHydrationWarning temporarily in development
Prioritize extension management: Site-specific control is cleaner than suppressing warnings

Final Recommendations

Disable extensions like Grammarly/ColorZilla for localhost (permanent fix)
Use site-specific extension controls in Chrome for development
Reserve suppressHydrationWarning for root elements only and only in development
Verify layouts aren't adding duplicate html/body tags

By addressing extension interference, you eliminate the warning while maintaining optimal hydration integrity for your Next.js application.

Related Posts

Extra attributes from the server in Next.js ​

Problem Statement ​

Solutions ​

Primary Fix: Browser Extensions ​

Control Extensions for Localhost ​

Temporary Suppression (Development Only) ​

Other Edge Cases ​

Explanation ​

Final Recommendations ​