Merge pull request #16086 from ethereum/fix-nav-hydration

Fix hydration issue in nav

Author: wackerow

src/components/Homepage/LanguageMorpher.tsx

@@ -11,9 +11,12 @@ import {
   MOBILE_LANGUAGE_BUTTON_NAME,
 } from "@/lib/constants"
 
+import { useIsClient } from "@/hooks/useIsClient"
 import { useMediaQuery } from "@/hooks/useMediaQuery"
 
 const LanguageMorpher = () => {
+  const isClient = useIsClient()
+
   const handleMobileClick = () => {
     ;(document.getElementById(HAMBURGER_BUTTON_ID) as HTMLButtonElement).click()
     setTimeout(
@@ -36,10 +39,14 @@ const LanguageMorpher = () => {
 
   const [isLarge] = useMediaQuery([`(min-width: ${screens.md})`])
 
+  // Use fallback value during SSR to prevent hydration mismatch
+  // Default to false (mobile) during SSR, then use actual value on client
+  const isLargeScreen = isClient && isLarge
+
   return (
     <Button
       className="mx-auto w-fit text-md text-primary no-underline"
-      onClick={isLarge ? handleDesktopClick : handleMobileClick}
+      onClick={isLargeScreen ? handleDesktopClick : handleMobileClick}
       variant="ghost"
     >
       <Morpher

src/components/Nav/Client/index.tsx

@@ -16,6 +16,7 @@ import { useNavigation } from "../useNavigation"
 import { useThemeToggle } from "../useThemeToggle"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+import { useIsClient } from "@/hooks/useIsClient"
 import { useTranslation } from "@/hooks/useTranslation"
 
 const LazyButton = dynamic(
@@ -86,9 +87,14 @@ const ClientSideNav = () => {
   const { toggleColorMode, ThemeIcon, themeIconAriaLabel } = useThemeToggle()
 
   const languagePickerRef = useRef<HTMLButtonElement>(null)
+  const isClient = useIsClient()
 
   // avoid rendering/adding desktop Menu version to DOM on mobile
-  const desktopScreen = useBreakpointValue({ base: false, md: true })
+  const desktopScreenValue = useBreakpointValue({ base: false, md: true })
+
+  // Use fallback value during SSR to prevent hydration mismatch
+  // Default to false (mobile) during SSR, then use actual value on client
+  const desktopScreen = isClient && desktopScreenValue
 
   return (
     <>