Dev Solve

English

中文
日本語

English

中文
日本語

Appearance

Related Posts

Solving Next.js "Event handlers cannot be passed to Client Component props" Error

Get Current Pathname in Next.js App Router

Next.js use client Directive

Unsupported Server Component type: undefined in Next.js

Next.js App Router API Routes

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)
:::
Managing browser extensions in Chrome

Control Extensions for Localhost ​

Chrome supports disabling extensions only for localhost:

  1. Enable Chrome flag: Navigate to chrome://flags/#extensions-menu-access-control
  2. Relaunch Chrome
  3. Click the extensions icon while on localhost:3000
  4. Toggle off extensions only for this site
Site-specific extension control

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:

js
// 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:

  1. Server-rendered HTML (no extension attributes)
  2. 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

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

Final Recommendations ​

  1. Disable extensions like Grammarly/ColorZilla for localhost (permanent fix)
  2. Use site-specific extension controls in Chrome for development
  3. Reserve suppressHydrationWarning for root elements only and only in development
  4. 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.