Integrate next-intl for internationalization support across the application. Updated configuration to include next-intl plugin and modified components to utilize translation hooks for dynamic text rendering. Enhanced user experience by localizing navigation labels and form messages in various views, including login and dashboard components.

2026-02-19 17:21:43 +03:30
parent 51175ffac2
commit 0844100613
34 changed files with 1372 additions and 248 deletions
@@ -2,6 +2,8 @@
 import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'

 // Third-party Imports
+import { NextIntlClientProvider } from 'next-intl'
+import { getLocale, getMessages } from 'next-intl/server'
 import 'react-perfect-scrollbar/dist/css/styles.css'

 // Type Imports
@@ -26,17 +28,21 @@ export const metadata = getMetadata()

 const RootLayout = async (props: ChildrenType) => {
  const { children } = props
-  
+
+  const locale = await getLocale()
+  const messages = await getMessages()

  // Vars
  const systemMode = await getSystemMode()
  const direction = 'rtl' // Fixed RTL direction

  return (
-    <html id='__next' dir={direction} className={iran_sans.className} suppressHydrationWarning>
+    <html id='__next' dir={direction} className={iran_sans.className} lang={locale} suppressHydrationWarning>
      <body className='flex is-full min-bs-full flex-auto flex-col'>
        <InitColorSchemeScript attribute='data' defaultMode={systemMode} />
-        {children}
+        <NextIntlClientProvider locale={locale} messages={messages}>
+          {children}
+        </NextIntlClientProvider>
      </body>
    </html>
  )