fix: 修复服务端渲染时的翻译不匹配问题

src/components/layout/Header.tsx

@@ -2,12 +2,12 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, Sparkles } from "lucide-react";
 // import { Button } from "@/components/ui/button"; // TODO: Uncomment when adding login/register buttons
 import { LanguageSwitcher } from "./LanguageSwitcher";
-import { useTranslation } from "@/lib/i18n";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
 function useNavItems() {
@@ -24,8 +24,40 @@ function useNavItems() {
 export function Header() {
   const pathname = usePathname();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [mounted, setMounted] = useState(false);
   const navItems = useNavItems();
-  const { t } = useTranslation();
+  const { t, locale, setLocale } = useTranslation();
+
+  useEffect(() => {
+    setMounted(true);
+    
+    // Auto detect language on first mount if not manually set
+    const stored = localStorage.getItem("locale-storage");
+    if (!stored) {
+      const lang = navigator.language.toLowerCase();
+      if (lang.includes("zh")) {
+        setLocale("zh");
+      }
+    }
+  }, [setLocale]);
+
+  useEffect(() => {
+    if (mounted) {
+      document.documentElement.lang = locale;
+    }
+  }, [locale, mounted]);
+
+  // Prevent hydration mismatch by rendering a stable version initially
+  const displayT = (key: string, params?: any) => {
+    if (!mounted) return getServerTranslations("en").t(key, params);
+    return t(key, params);
+  };
+  
+  const currentNavItems = mounted ? navItems : [
+    { name: "Tools", href: "/tools/image-compress" },
+    { name: "Pricing", href: "/tools/video-frames" },
+    { name: "Docs", href: "/tools/audio-compress" },
+  ];
 
   return (
     <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
@@ -35,12 +67,12 @@ export function Header() {
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
             <Sparkles className="h-5 w-5 text-primary-foreground" />
           </div>
-          <span className="text-xl font-bold">{t("common.appName")}</span>
+          <span className="text-xl font-bold">{displayT("common.appName")}</span>
         </Link>
 
         {/* Desktop Navigation */}
         <div className="hidden md:flex md:items-center md:space-x-6">
-          {navItems.map((item) => (
+          {currentNavItems.map((item) => (
             <Link
               key={item.name}
               href={item.href}
@@ -56,13 +88,13 @@ export function Header() {
 
         {/* CTA Buttons */}
         <div className="hidden md:flex md:items-center md:space-x-4">
-          <LanguageSwitcher />
+          {mounted && <LanguageSwitcher />}
           {/* TODO: Create login/register pages
           <Button variant="ghost" size="sm" asChild>
-            <Link href="/login">{t("common.signIn")}</Link>
+            <Link href="/login">{displayT("common.signIn")}</Link>
           </Button>
           <Button size="sm" asChild>
-            <Link href="/register">{t("common.getStarted")}</Link>
+            <Link href="/register">{displayT("common.getStarted")}</Link>
           </Button>
           */}
         </div>
@@ -71,7 +103,7 @@ export function Header() {
         <button
           className="md:hidden"
           onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
-          aria-label="Toggle menu"
+          aria-label={displayT("common.toggleMenu")}
         >
           {isMobileMenuOpen ? (
             <X className="h-6 w-6" />
@@ -92,7 +124,7 @@ export function Header() {
             className="md:hidden border-t border-border/40"
           >
             <div className="container space-y-4 py-6">
-              {navItems.map((item) => (
+              {currentNavItems.map((item) => (
                 <Link
                   key={item.name}
                   href={item.href}
@@ -106,13 +138,13 @@ export function Header() {
                 </Link>
               ))}
               <div className="flex flex-col space-y-2 pt-4">
-                <LanguageSwitcher />
+                {mounted && <LanguageSwitcher />}
                 {/* TODO: Create login/register pages
                 <Button variant="ghost" size="sm" asChild className="w-full">
-                  <Link href="/login">{t("common.signIn")}</Link>
+                  <Link href="/login">{displayT("common.signIn")}</Link>
                 </Button>
                 <Button size="sm" asChild className="w-full">
-                  <Link href="/register">{t("common.getStarted")}</Link>
+                  <Link href="/register">{displayT("common.getStarted")}</Link>
                 </Button>
                 */}
               </div>