reels

src/contexts/LanguageProvider.tsx

@@ -11,6 +11,7 @@ import {
 import { useTranslation } from "react-i18next";
 import "@/lib/i18n";
 import {
+  DEFAULT_LANGUAGE,
   getDirection,
   type AppLanguage,
 } from "@/lib/i18n/registry";
@@ -33,9 +34,11 @@ const LanguageContext = createContext<LanguageContextValue | null>(null);
 
 export function LanguageProvider({ children }: { children: React.ReactNode }) {
   const { i18n } = useTranslation();
-  const [language, setLanguageState] = useState<AppLanguage>(() => {
-    return readStoredLanguagePreference() ?? resolveBrowserLanguage();
-  });
+  // Always start at the deterministic default on both server and the first client
+  // render pass — reading cookies/localStorage/navigator here would differ between
+  // SSR (no window) and hydration (window present), causing a hydration mismatch.
+  // The real preference is resolved client-side in the effect below instead.
+  const [language, setLanguageState] = useState<AppLanguage>(DEFAULT_LANGUAGE);
   const [ready, setReady] = useState(false);
 
   useEffect(() => {