fixing hydration mismatches in next.js caused by chrome extensions

OtherBenardJun 9, 2026

Question

how to resolve hydration mismatches in a next.js application caused by chrome extensions

Answer

hydration mismatches from chrome extensions are generally harmless and can be fixed by adding `suppressHydrationWarning` to the `html` or `body` elements in the root layout. this tells react to ignore the mismatches caused by the extensions, which usually inject attributes or dom nodes into the page before react runs its hydration pass.

tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body suppressHydrationWarning>
        {children}
      </body>
    </html>
  );
}

tsx

"use client";
import { useEffect, useState } from "react";

export function ClientOnlyTime() {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) return null; // render nothing (matches server) until hydrated
  return <span>{new Date().toLocaleTimeString()}</span>;
}

reactnext.jschrome extensionshydration mismatch