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

2026-01-24 16:38:47 +08:00
parent e2280b12e2
commit b7402edf6a
11 changed files with 319 additions and 184 deletions
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -2,26 +2,34 @@

 import Link from "next/link";
 import { Sparkles, Github, Twitter } from "lucide-react";
-import { useTranslation } from "@/lib/i18n";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
+import { useState, useEffect } from "react";

 function useFooterLinks() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
  const { t } = useTranslation();

+  const getT = (key: string) => {
+    if (!mounted) return getServerTranslations("en").t(key);
+    return t(key);
+  };
+
  return {
    product: [
-      { name: t("common.features"), href: "/features" },
-      { name: t("nav.pricing"), href: "/pricing" },
+      { name: getT("common.features"), href: "/features" },
+      { name: getT("nav.pricing"), href: "/pricing" },
      { name: "API", href: "/api" },
-      { name: t("nav.docs"), href: "/docs" },
+      { name: getT("nav.docs"), href: "/docs" },
    ],
    tools: [
-      { name: t("sidebar.videoToFrames"), href: "/tools/video-frames" },
-      { name: t("sidebar.imageCompression"), href: "/tools/image-compress" },
-      { name: t("sidebar.audioCompression"), href: "/tools/audio-compress" },
-      { name: t("home.tools.aiTools.title"), href: "/tools/ai-tools" },
+      { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames" },
+      { name: getT("sidebar.imageCompression"), href: "/tools/image-compress" },
+      { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress" },
+      { name: getT("home.tools.aiTools.title"), href: "/tools/ai-tools" },
    ],
    company: [
-      { name: t("nav.about"), href: "/about" },
+      { name: getT("nav.about"), href: "/about" },
      { name: "Blog", href: "/blog" },
      { name: "Careers", href: "/careers" },
      { name: "Contact", href: "/contact" },
@@ -47,9 +55,16 @@ const sectionTitles: Record<string, string> = {
 };

 export function Footer() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
  const { t } = useTranslation();
  const footerLinks = useFooterLinks();

+  const getT = (key: string) => {
+    if (!mounted) return getServerTranslations("en").t(key);
+    return t(key);
+  };
+
  return (
    <footer className="border-t border-border/40 bg-background/50">
      <div className="container py-12 md:py-16">
@@ -60,10 +75,10 @@ export function Footer() {
              <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">{getT("common.appName")}</span>
            </Link>
            <p className="mt-4 text-sm text-muted-foreground">
-              {t("footer.tagline")}
+              {getT("footer.tagline")}
            </p>
          </div>

@@ -139,7 +154,7 @@ export function Footer() {
        {/* Bottom section */}
        <div className="mt-12 flex flex-col items-center justify-between border-t border-border/40 pt-8 md:flex-row">
          <p className="text-sm text-muted-foreground">
-            © {new Date().getFullYear()} {t("common.appName")}. All rights reserved.
+            © {new Date().getFullYear()} {getT("common.appName")}. All rights reserved.
          </p>
          <div className="mt-4 flex space-x-6 md:mt-0">
            {socialLinks.map((link) => {
--- a/src/components/layout/Header.tsx
+++ b/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>
--- a/src/components/layout/LanguageSwitcher.tsx
+++ b/src/components/layout/LanguageSwitcher.tsx
@@ -25,19 +25,17 @@ export function LanguageSwitcher() {
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sm" className="gap-2">
          <Globe className="h-4 w-4" />
-          <span className="hidden md:inline">{locales[locale].flag}</span>
          <span className="hidden lg:inline">{locales[locale].name}</span>
        </Button>
      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="min-w-[160px]">
-        {Object.entries(locales).map(([key, { name, flag }]) => (
+      <DropdownMenuContent align="end" className="min-w-[120px]">
+        {Object.entries(locales).map(([key, { name }]) => (
          <DropdownMenuItem
            key={key}
            onClick={() => handleLocaleChange(key as Locale)}
            className="flex cursor-pointer items-center justify-between gap-2"
          >
            <span className="flex items-center gap-2">
-              <span>{flag}</span>
              <span>{name}</span>
            </span>
            {locale === key && (
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -11,34 +11,43 @@ import {
  LayoutDashboard,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { useTranslation } from "@/lib/i18n";
+import { useTranslation, getServerTranslations } from "@/lib/i18n";
+import { useState, useEffect } from "react";

 function useSidebarNavItems() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
  const { t } = useTranslation();
+
+  const getT = (key: string) => {
+    if (!mounted) return getServerTranslations("en").t(key);
+    return t(key);
+  };
+
  return [
    {
-      title: t("nav.dashboard"),
+      title: getT("nav.dashboard"),
      items: [
-        { name: t("nav.overview"), href: "/", icon: LayoutDashboard },
+        { name: getT("nav.overview"), href: "/", icon: LayoutDashboard },
      ],
    },
    {
-      title: t("sidebar.tools"),
+      title: getT("sidebar.tools"),
      items: [
-        { name: t("sidebar.videoToFrames"), href: "/tools/video-frames", icon: Video },
-        { name: t("sidebar.imageCompression"), href: "/tools/image-compress", icon: Image },
-        { name: t("sidebar.audioCompression"), href: "/tools/audio-compress", icon: Music },
+        { name: getT("sidebar.videoToFrames"), href: "/tools/video-frames", icon: Video },
+        { name: getT("sidebar.imageCompression"), href: "/tools/image-compress", icon: Image },
+        { name: getT("sidebar.audioCompression"), href: "/tools/audio-compress", icon: Music },
      ],
    },
    {
-      title: t("sidebar.aiTools"),
+      title: getT("sidebar.aiTools"),
      items: [
-        { name: t("sidebar.aiImage"), href: "/tools/ai-tools", icon: Sparkles },
-        { name: t("sidebar.aiAudio"), href: "/tools/ai-tools", icon: Sparkles },
+        { name: getT("sidebar.aiImage"), href: "/tools/ai-tools", icon: Sparkles },
+        { name: getT("sidebar.aiAudio"), href: "/tools/ai-tools", icon: Sparkles },
      ],
    },
    {
-      title: t("nav.account"),
+      title: getT("nav.account"),
      items: [
        // TODO: Create pricing and settings pages
        // { name: t("nav.pricing"), href: "/pricing", icon: CreditCard },
@@ -53,6 +62,8 @@ interface SidebarProps {
 }

 export function Sidebar({ className }: SidebarProps) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
  const pathname = usePathname();
  const sidebarNavItems = useSidebarNavItems();