fix(devbox): i18n error

frontend/providers/devbox/app/[lang]/(platform)/(empty)/components/DevboxList.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip
 } from '@chakra-ui/react'
 import dynamic from 'next/dynamic'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
 import { useTranslations } from 'next-intl'
 import { useCallback, useState } from 'react'
 import { SealosMenu, MyTable, useMessage } from '@sealos/ui'

frontend/providers/devbox/app/[lang]/(platform)/(empty)/components/Empty.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
 import { useTranslations } from 'next-intl'
 import { Button, Box } from '@chakra-ui/react'
 

frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Form.tsx

@@ -18,7 +18,7 @@ import { throttle } from 'lodash'
 import dynamic from 'next/dynamic'
 import { customAlphabet } from 'nanoid'
 import { useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
 import { useTranslations } from 'next-intl'
 import { UseFormReturn, useFieldArray } from 'react-hook-form'
 import { MySelect, MySlider, Tabs } from '@sealos/ui'

frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Header.tsx

@@ -1,7 +1,7 @@
 import JSZip from 'jszip'
 import dayjs from 'dayjs'
 import React, { useCallback } from 'react'
-import { useRouter } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
 import { useTranslations } from 'next-intl'
 import { Box, Flex, Button } from '@chakra-ui/react'
 

frontend/providers/devbox/app/[lang]/(platform)/devbox/create/components/Yaml.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import { Tabs } from '@sealos/ui'
 import { useTranslations } from 'next-intl'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
+import { useSearchParams } from 'next/navigation'
 import { Box, Center, Flex, Grid, useTheme } from '@chakra-ui/react'
 
 import MyIcon from '@/components/Icon'

frontend/providers/devbox/app/[lang]/(platform)/devbox/create/page.tsx

@@ -7,7 +7,8 @@ import { useForm } from 'react-hook-form'
 import { Box, Flex } from '@chakra-ui/react'
 import { useTranslations } from 'next-intl'
 import { useQuery } from '@tanstack/react-query'
-import { useRouter, useSearchParams } from 'next/navigation'
+import { useRouter } from '@/i18n/routing'
+import { useSearchParams } from 'next/navigation'
 import { useCallback, useMemo, useRef, useState } from 'react'
 
 import Form from './components/Form'

frontend/providers/devbox/app/[lang]/(platform)/layout.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import throttle from 'lodash/throttle'
+import { useRouter, usePathname } from '@/i18n/routing'
 import { useEffect, useState } from 'react'
-import { usePathname, useRouter } from 'next/navigation'
 import { EVENT_NAME } from 'sealos-desktop-sdk'
 import { createSealosApp, sealosApp } from 'sealos-desktop-sdk/app'
 
@@ -32,6 +32,33 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
     content: 'not_allow_standalone_use'
   })
 
+  // init session
+  useEffect(() => {
+    const response = createSealosApp()
+    ;(async () => {
+      try {
+        const newSession = JSON.stringify(await sealosApp.getSession())
+        const oldSession = localStorage.getItem('session')
+        if (newSession && newSession !== oldSession) {
+          localStorage.setItem('session', newSession)
+          window.location.reload()
+        }
+        console.log('devbox: app init success')
+      } catch (err) {
+        console.log('devbox: app is not running in desktop')
+        if (!process.env.NEXT_PUBLIC_MOCK_USER) {
+          localStorage.removeItem('session')
+          openConfirm(() => {
+            // NOTE: 这里的SEALOS_DOMAIN可能获取不到
+            window.open(`https://${SEALOS_DOMAIN}`, '_self')
+          })()
+        }
+      }
+    })()
+    return response
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   useEffect(() => {
     getUserPrice()
     getRuntime()
@@ -41,7 +68,7 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
       const lastLang = getLangStore()
       const newLang = data.currentLanguage
       if (lastLang !== newLang) {
-        // router.push(`/${newLang}`)
+        router.push(pathname, { locale: newLang })
         setLangStore(newLang)
         setRefresh((state) => !state)
       }
@@ -63,33 +90,6 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
     return sealosApp?.addAppEventListen(EVENT_NAME.CHANGE_I18N, changeI18n)
   }, [])
 
-  // init session
-  useEffect(() => {
-    const response = createSealosApp()
-    ;(async () => {
-      try {
-        const newSession = JSON.stringify(await sealosApp.getSession())
-        const oldSession = localStorage.getItem('session')
-        if (newSession && newSession !== oldSession) {
-          localStorage.setItem('session', newSession)
-          window.location.reload()
-        }
-        console.log('devbox: app init success')
-      } catch (err) {
-        console.log('devbox: app is not running in desktop')
-        if (!process.env.NEXT_PUBLIC_MOCK_USER) {
-          localStorage.removeItem('session')
-          openConfirm(() => {
-            // NOTE: 这里的SEALOS_DOMAIN可能获取不到
-            window.open(`https://${SEALOS_DOMAIN}`, '_self')
-          })()
-        }
-      }
-    })()
-    return response
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   // add resize event
   useEffect(() => {
     const resize = throttle((e: Event) => {
@@ -114,8 +114,8 @@ export default function PlatformLayout({ children }: { children: React.ReactNode
   }, [pathname])
 
   useEffect(() => {
-    const lang = getLangStore() || 'zh'
-    // router.push(`/${lang}`)
+    const lang = getLangStore() || ('zh' as any)
+    router.push(pathname, { locale: lang })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [refresh, pathname])
 

frontend/providers/devbox/app/[lang]/layout.tsx

@@ -23,15 +23,15 @@ export const viewport: Viewport = {
   initialScale: 1
 }
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
-  params: { lang }
+  params: { locale }
 }: Readonly<{
   children: React.ReactNode
-  params: { lang: string }
+  params: { locale: string }
 }>) {
   return (
-    <html lang={lang}>
+    <html lang={locale}>
       <body className={inter.className}>
         <IntlProvider>{children}</IntlProvider>
       </body>

frontend/providers/devbox/i18n.ts → frontend/providers/devbox/i18n/request.ts

@@ -1,14 +1,12 @@
+import { routing } from './routing'
 import { notFound } from 'next/navigation'
 import { getRequestConfig } from 'next-intl/server'
 
-// Can be imported from a shared config
-const locales = ['en', 'zh']
-
 export default getRequestConfig(async ({ locale }) => {
   // Validate that the incoming `locale` parameter is valid
-  if (!locales.includes(locale as any)) notFound()
+  if (!routing.locales.includes(locale as any)) notFound()
 
   return {
-    messages: (await import(`./message/${locale}.json`)).default
+    messages: (await import(`../message/${locale}.json`)).default
   }
 })

frontend/providers/devbox/i18n/routing.ts

@@ -0,0 +1,14 @@
+import { defineRouting } from 'next-intl/routing'
+import { createSharedPathnamesNavigation } from 'next-intl/navigation'
+
+export const routing = defineRouting({
+  // A list of all locales that are supported
+  locales: ['en', 'zh'],
+
+  // Used when no locale matches
+  defaultLocale: 'en'
+})
+
+// Lightweight wrappers around Next.js' navigation APIs
+// that will consider the routing configuration
+export const { Link, redirect, usePathname, useRouter } = createSharedPathnamesNavigation(routing)

frontend/providers/devbox/middleware.ts

@@ -1,12 +1,7 @@
+import { routing } from './i18n/routing'
 import createMiddleware from 'next-intl/middleware'
 
-export default createMiddleware({
-  // A list of all locales that are supported
-  locales: ['en', 'zh'],
-
-  // Used when no locale matches
-  defaultLocale: 'en'
-})
+export default createMiddleware(routing)
 
 export const config = {
   // Match only internationalized pathnames

frontend/providers/devbox/package.json

@@ -33,7 +33,7 @@
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
     "next": "14.2.5",
-    "next-intl": "^3.17.2",
+    "next-intl": "^3.19.0",
     "nprogress": "^0.2.0",
     "react": "^18",
     "react-dom": "^18",