solve Hydration Mismatch problem

This commit is contained in:
m7amedez5511
2026-08-19 18:34:03 +03:00
parent 2d05d3446c
commit c5e4ade2fb
2 changed files with 66 additions and 8 deletions

View File

@@ -1,4 +1,5 @@
import type { Metadata } from "next";
import Script from "next/script";
import "@tabler/icons-webfont/dist/tabler-icons.min.css";
import "./globals.css";
import ConditionalNavbar from "./components/layout/ConditionalNavbar";
@@ -20,12 +21,35 @@ export default function RootLayout({
<html lang="ar" dir="rtl">
<body className="app-shell" suppressHydrationWarning>
// CHANGE: added — fixes hydration mismatch caused by browser extensions
{/* CHANGE: added — fixes hydration mismatch caused by browser extensions */}
<ExtensionAttributeCleanup />
// CHANGE: navbar is conditional based on route, so we can hide it on login/register pages
{/* CHANGE: navbar is conditional based on route, so we can hide it on login/register pages */}
<ConditionalNavbar />
{children}
<Footer />
<Script
id="extension-attribute-pre-hydration-cleanup"
strategy="beforeInteractive"
>
{`(() => {
const attrs = ["bis_skin_checked", "bis_register", "__processed_by_bitdefender__"];
const selector = attrs.map((attr) => "[" + attr + "]").join(",");
function strip() {
document.querySelectorAll(selector).forEach((element) => {
attrs.forEach((attr) => element.removeAttribute(attr));
});
}
strip();
new MutationObserver(strip).observe(document, {
attributes: true,
childList: true,
subtree: true,
attributeFilter: attrs,
});
})();`}
</Script>
</body>
</html>
);