🐛 Fix the issue where the Chinese language is displayed after refreshing the English interface.

Phinease · web-flow · commit 72d933ea6cbd · 2025-06-27T12:27:54.000+08:00
diff --git a/frontend/app/[locale]/layout.tsx b/frontend/app/[locale]/layout.tsx
@@ -6,6 +6,7 @@ import "../globals.css"
 import { ReactNode } from 'react';
 import path from 'path';
 import fs from 'fs';
+import I18nProviderWrapper from "@/components/providers/I18nProviderWrapper"
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -15,15 +16,18 @@ export async function generateMetadata({
 }: {
   params: { locale: string };
 }): Promise<Metadata> {
-  const filePath = path.join(process.cwd(), 'public', 'locales', locale, 'common.json');
-  const messages = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  let messages: any = {}
+  if (['zh', 'en'].includes(locale)) {
+    const filePath = path.join(process.cwd(), 'public', 'locales', locale, 'common.json');
+    messages = JSON.parse(fs.readFileSync(filePath, 'utf8'));
+  }
 
   return {
     title: {
-      default: messages.layout.title,
-      template: messages.layout.titleTemplate,
+      default: messages.layout?.title,
+      template: messages.layout?.titleTemplate,
     },
-    description: messages.layout.description,
+    description: messages.layout?.description,
     icons: {
       icon: '/modelengine-logo.png',
       shortcut: '/favicon.ico',
@@ -46,7 +50,7 @@ export default function RootLayout({
       </head>
       <body className={inter.className}>
         <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-          {children}
+          <I18nProviderWrapper>{children}</I18nProviderWrapper>
         </ThemeProvider>
       </body>
     </html>
diff --git a/frontend/app/[locale]/page.tsx b/frontend/app/[locale]/page.tsx
@@ -1,5 +1,5 @@
 "use client"
-import "./i18n"
+
 import { useState, useEffect } from "react"
 import { useTranslation } from 'react-i18next'
 import { Bot, Globe, Database, Zap, Mic, FileSearch, Shield, MessagesSquare, Microchip } from "lucide-react"
diff --git a/frontend/components/providers/I18nProviderWrapper.tsx b/frontend/components/providers/I18nProviderWrapper.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import i18n from "@/app/i18n"
+import { I18nextProvider } from "react-i18next"
+import { ReactNode, useEffect, useState } from "react"
+import { usePathname } from "next/navigation"
+
+export default function I18nProviderWrapper({
+  children,
+}: {
+  children: ReactNode
+}) {
+  const [mounted, setMounted] = useState(false)
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Synchronize i18n language according to the URL
+  useEffect(() => {
+    if (!mounted) return;
+    
+    const segments = pathname.split('/').filter(Boolean);
+    const urlLocale = segments[0];
+
+    if (urlLocale === 'zh' || urlLocale === 'en') {
+      if (i18n.language !== urlLocale) {
+        i18n.changeLanguage(urlLocale);
+      }
+      document.cookie = `NEXT_LOCALE=${urlLocale}; path=/; max-age=31536000`;
+    }
+  }, [pathname, i18n, mounted]);
+  
+  if (!mounted) {
+    return null
+  }
+  
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>
+} 
