feat: add internationalization support with next-intl

app/components/layout/header.tsx

@@ -1,5 +1,6 @@
 import { SignButton } from "@/components/auth/sign-button"
 import { ThemeToggle } from "@/components/theme/theme-toggle"
+import { LanguageSwitcher } from "@/components/layout/language-switcher"
 import { Logo } from "@/components/ui/logo"
 
 export function Header() {
@@ -9,6 +10,7 @@ export function Header() {
         <div className="h-full flex items-center justify-between">
           <Logo />
           <div className="flex items-center gap-4">
+            <LanguageSwitcher />
             <ThemeToggle />
             <SignButton />
           </div>

app/components/layout/language-switcher.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useLocale, useTranslations } from "next-intl"
+import { usePathname, useRouter } from "next/navigation"
+import { i18n } from "@/i18n/config"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+import { Languages } from "lucide-react"
+
+export function LanguageSwitcher() {
+  const t = useTranslations("common")
+  const locale = useLocale()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const switchLocale = (newLocale: string) => {
+    if (newLocale === locale) return
+
+    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000`
+
+    const segments = pathname.split("/")
+    if (i18n.locales.includes(segments[1] as any)) {
+      segments[1] = newLocale
+    } else {
+      segments.splice(1, 0, newLocale)
+    }
+    const newPath = segments.join("/")
+
+    router.push(newPath)
+    router.refresh()
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon">
+          <Languages className="h-5 w-5" />
+          <span className="sr-only">{t("lang.switch")}</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem
+          onClick={() => switchLocale("en")}
+          className={locale === "en" ? "bg-accent" : ""}
+        >
+          {t("lang.en")}
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => switchLocale("zh-CN")}
+          className={locale === "zh-CN" ? "bg-accent" : ""}
+        >
+          {t("lang.zhCN")}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}