add: locale and i18n

i18nConfig.js

@@ -0,0 +1,6 @@
+const i18nConfig = {
+  locales: ['en', 'fa'],
+  defaultLocale: 'fa'
+};
+
+module.exports = i18nConfig;

package-lock.json

@@ -24,13 +24,17 @@
         "cmdk": "^1.1.1",
         "dmenu-plus-frontned": "file:",
         "framer-motion": "^12.23.3",
+        "i18next": "^25.3.2",
+        "i18next-resources-to-backend": "^1.2.1",
         "iconsax-react": "^0.0.8",
         "lucide-react": "^0.525.0",
         "next": "15.3.4",
+        "next-i18n-router": "^5.5.3",
         "next-usequerystate": "^1.20.0",
         "react": "^19.0.0",
         "react-day-picker": "^9.8.0",
         "react-dom": "^19.0.0",
+        "react-i18next": "^15.6.1",
         "react-virtualized": "^9.22.6",
         "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.6"
@@ -316,6 +320,15 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.5.10.tgz",
+      "integrity": "sha512-af3qATX+m4Rnd9+wHcjJ4w2ijq+rAVP3CCinJQvFv1kgSu1W6jypUmvleJxcewdxmutM8dmIRZFxO/IQBZmP2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -4691,6 +4704,55 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "25.3.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.3.2.tgz",
+      "integrity": "sha512-JSnbZDxRVbphc5jiptxr3o2zocy5dEqpVm9qCGdJwRNO+9saUJS0/u4LnM/13C23fUEWxAylPqKU/NpMV/IjqA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-resources-to-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
+      "integrity": "sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconsax-react": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/iconsax-react/-/iconsax-react-0.0.8.tgz",
@@ -5796,6 +5858,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/negotiator": {
+      "version": "0.6.4",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz",
+      "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/next": {
       "version": "15.3.4",
       "resolved": "https://registry.npmjs.org/next/-/next-15.3.4.tgz",
@@ -5850,6 +5921,16 @@
         }
       }
     },
+    "node_modules/next-i18n-router": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/next-i18n-router/-/next-i18n-router-5.5.3.tgz",
+      "integrity": "sha512-btKVR/Mup05scxJp3EdPNALlufnZ/BO/zkIZc8a5ESdu+CNnmLW1AOkziTfRawXiZcznACCQtyfKNobC/WBTEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "^0.5.2",
+        "negotiator": "^0.6.3"
+      }
+    },
     "node_modules/next-usequerystate": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/next-usequerystate/-/next-usequerystate-1.20.0.tgz",
@@ -6278,6 +6359,32 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.6.1.tgz",
+      "integrity": "sha512-uGrzSsOUUe2sDBG/+FJq2J1MM+Y4368/QW8OLEKSFvnDflHBbZhSd1u3UkW0Z06rMhZmnB/AQrhCpYfE5/5XNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.6",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -7367,6 +7474,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -25,13 +25,17 @@
     "cmdk": "^1.1.1",
     "dmenu-plus-frontned": "file:",
     "framer-motion": "^12.23.3",
+    "i18next": "^25.3.2",
+    "i18next-resources-to-backend": "^1.2.1",
     "iconsax-react": "^0.0.8",
     "lucide-react": "^0.525.0",
     "next": "15.3.4",
+    "next-i18n-router": "^5.5.3",
     "next-usequerystate": "^1.20.0",
     "react": "^19.0.0",
     "react-day-picker": "^9.8.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.6.1",
     "react-virtualized": "^9.22.6",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.6"

src/app/[locale]/dictionaries.ts

@@ -0,0 +1,9 @@
+import 'server-only'
+ 
+const dictionaries = {
+  en: () => import('@/dictionaries/en.json').then((module) => module.default),
+  fa: () => import('@/dictionaries/fa.json').then((module) => module.default),
+}
+ 
+export const getDictionary = async (locale: 'en' | 'fa') =>
+  dictionaries[locale]()

src/app/[locale]/layout.tsx

@@ -0,0 +1,49 @@
+import { Metadata } from "next";
+import "../globals.css";
+import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
+import { notFound } from "next/navigation";
+import i18nConfig from "../../../i18nConfig";
+import initTranslations from '@/lib/i18n';
+import TranslationsProvider from "@/components/utils/TranslationsProdiver";
+
+export const metadata: Metadata = {
+  title: 'Dashboard',
+  description: 'Webapp dashboard'
+}
+
+const i18nNamespaces = ['auth'];
+
+export default async function RootLayout({
+  children,
+  params,
+}: Readonly<{
+  children: React.ReactNode;
+  params: { locale: string }
+}>) {
+  const { locale } = await params;
+  if (!i18nConfig.locales.includes(locale)) {
+    notFound();
+  }
+  const { resources } = await initTranslations(locale, i18nNamespaces);
+
+  return (
+
+    <html lang={locale} className="h-svh overflow-hidden">
+      <body
+        dir={locale === 'fa' ? 'rtl' : 'ltr'}
+        className={`antialiased bg-background h-svh overflow-hidden`}
+      >
+        <ReactQueryProvider>
+          <TranslationsProvider
+            namespaces={i18nNamespaces}
+            locale={locale}
+            resources={resources}>
+            <div id="root" className="h-svh overflow-hidden">
+              {children}
+            </div>
+          </TranslationsProvider>
+        </ReactQueryProvider>
+      </body>
+    </html >
+  );
+}

src/app/layout.tsx

@@ -1,31 +0,0 @@
-import { Metadata } from "next";
-import "./globals.css";
-import { ReactQueryProvider } from "@/components/providers/ReactQueryProvider";
-
-export const metadata: Metadata = {
-  title: 'Dashboard',
-  description: 'Webapp dashboard'
-}
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-
-  return (
-
-    <html lang="en" className="h-svh overflow-hidden">
-      <body
-        dir="rtl"
-        className={`antialiased bg-background h-svh overflow-hidden`}
-      >
-        <ReactQueryProvider>
-          <div id="root" className="h-svh overflow-hidden">
-            {children}
-          </div>
-        </ReactQueryProvider>
-      </body>
-    </html>
-  );
-}

src/components/input/InputField.tsx

@@ -15,7 +15,7 @@ function InputField({ onChange, htmlFor, labelText, children, valid = true, clas
     return (
         <div className={`${className} ${valid ? 'border-border' : 'border-invalid'} h-11 inline-flex relative border px-3 w-full rounded-normal group focus-within:border`}>
             <label
-                className='absolute right-2 -top-3 px-2 bg-container text-[12px] text-foreground'
+                className='absolute start-2 -top-2.5 px-2 bg-container text-[12px] text-foreground'
                 htmlFor={htmlFor}>
                 {labelText}
             </label>

src/components/utils/TranslationsProdiver.jsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { I18nextProvider } from 'react-i18next';
+import initTranslations from '@/lib/i18n';
+import { createInstance } from 'i18next';
+
+export default function TranslationsProvider({
+  children,
+  locale,
+  namespaces,
+  resources
+}) {
+  const i18n = createInstance();
+
+  initTranslations(locale, namespaces, i18n, resources);
+
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}

src/features/auth/components/StepEnterNumber.tsx

@@ -1,8 +1,11 @@
+'use client';
+
 import Button from '@/components/button/PrimaryButton';
 import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: React.ChangeEventHandler<HTMLInputElement>;
@@ -12,6 +15,7 @@ type Props = {
 
 function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
     const [error, setError] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -21,12 +25,12 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
         let error = '';
         if (value.length > 0) {
             if (!/^09\d{7,9}$/.test(value)) {
-                error = 'فرمت اشتباه است';
+                error = t('Errors.PhoneNumberFormat');
             }
         }
 
         setError(error);
-    }, [value])
+    }, [t, value])
 
     return (
         <>
@@ -41,9 +45,9 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                 <div className='w-full'>
-                    <div className='pt-4' dir='rtl'>
+                    <div className='pt-4'>
-                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                        <h6 className='text-lg font-bold'>{t('Enter.Heading')}</h6>
-                        <p className='mt-3 text-[13px]'>برای ورود شماره همراه خود را وارد نمایید.</p>
+                        <p className='mt-3 text-[13px]'>{t('Enter.Description')}</p>
                     </div>
                     <InputField
                         valid={!hasError()}
@@ -52,13 +56,13 @@ function StepEnterNumber({ onChange, pending, disabled, value }: Props) {
                         autoComplete='tel'
                         className='mt-10 w-full'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PHONE}
-                        labelText='شماره همراه'
+                        labelText={t('Enter.LabelPhoneNumber')}
                         value={value}
                         placeholder='09120000000'
                         onChange={onChange}
                         type='number' />
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('Enter.ButtonSubmit')}</Button>
             </div>
         </>
     )

src/features/auth/components/StepEnterOtp.tsx

@@ -4,6 +4,7 @@ import { AUTH_PAGE_ELEMENT, AUTH_PAGE_ELEMENT as AUTH_PAGE_ELEMENTS } from '@/en
 import clsx from 'clsx';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -17,6 +18,7 @@ type Props = {
 
 function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, phoneNumber, timerRunning, secondsLeft }: Props) {
     const [error, setError] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -25,11 +27,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
     useEffect(() => {
         let error = '';
         if (!/^\d{6}$/.test(value)) {
-            error = 'عبارت کامل نیست';
+            error = t('Errors.OTPFormat');
         }
 
         setError(error);
-    }, [value])
+    }, [t, value])
 
     return (
         <>
@@ -43,10 +45,10 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                 priority
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
-                <div className='pt-4' dir='rtl'>
+                <div className='pt-4'>
                     {/* // TODO: add persian digits font */}
-                    <h6 className='text-lg font-bold'>کد فعالسازی را وارد کنید</h6>
+                    <h6 className='text-lg font-bold'>{t('OTP.Heading')}</h6>
-                    <p className='mt-3 text-[13px]'>کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.</p>
+                    <p className='mt-3 text-[13px]'>{t('OTP.Description').replace('{phoneNumber}', phoneNumber)}</p>
                 </div>
                 <div className='w-full flex justify-center items-center'>
                     <OTPInputField
@@ -64,11 +66,11 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                 </div>
 
                 <div className='text-center w-full pt-6 text-xs'>
-                    <div dir='rtl'>
+                    <div>
                         {timerRunning ?
-                            <div>{secondsLeft} ثانیه دیگر تا دریافت کد</div> :
+                            <div>{t('OTP.TimerRunning').replace('{seconds}', String(secondsLeft))}</div> :
                             <div>
-                                کد را دریافت نکردید؟
+                                {t('OTP.TimerOut')}
                                 <button
                                     type='button'
                                     disabled={pending}
@@ -77,13 +79,13 @@ function StepEnterOtp({ onChange, onClick, pending, disabled = false, value, pho
                                         'px-1 transition-colors duration-200',
                                         !pending ? 'text-primary cursor-pointer' : 'text-neutral-200 cursor-auto'
                                     )} onClick={onClick}>
-                                    دوباره امتحان کنید
+                                        {t('OTP.TimerReset')}
                                 </button>
                             </div>
                         }
                     </div>
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>بعدی</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('OTP.ButtonSubmit')}</Button>
             </div>
         </>
     )

src/features/auth/components/StepEnterPassword.tsx

@@ -4,6 +4,7 @@ import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -16,6 +17,7 @@ type Props = {
 
 function StepEnterPassword({ onChange, onClick, pending, disabled = false, value, passwordVisible, rememberMe }: Props) {
     const [error, setError] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -25,12 +27,12 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
         let error = '';
         if (value.length > 0) {
             if (!/^.{6,}$/.test(value)) {
-                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error = t('Errors.PasswordLength');
             }
         }
 
         setError(error);
-    }, [value])
+    }, [t, value])
 
     return (
         <>
@@ -45,9 +47,9 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                 <div className='w-full'>
-                    <div className='pt-4' dir='rtl'>
+                    <div className='pt-4'>
-                        <h6 className='text-lg font-bold'>ورود به سیستم</h6>
+                        <h6 className='text-lg font-bold'>{t('EnterPass.Heading')}</h6>
-                        <p className='mt-3 text-[13px]'>کلمه عبور خود را وارد نمایید.</p>
+                        <p className='mt-3 text-[13px]'>{t('EnterPass.Description')}</p>
                     </div>
                     <InputField
                         valid={!hasError()}
@@ -56,7 +58,7 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
                         autoComplete='current-password'
                         className='mt-10'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                        labelText='کلمه عبور'
+                        labelText={t('EnterPass.LabelPass')}
                         value={value}
                         placeholder=''
                         onChange={onChange}
@@ -66,15 +68,19 @@ function StepEnterPassword({ onChange, onClick, pending, disabled = false, value
                         </button>
                     </InputField>
                     <div className='inline-flex justify-between items-center w-full pt-3'>
-                        <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>بازیابی کلمه عبور</button>
+                        <button id={AUTH_PAGE_ELEMENT.RESET_PASSWORD} type='button' onClick={onClick} className='text-sm2 cursor-pointer'>
+                            {t('EnterPass.ButtonRecover')}
+                        </button>
 
                         <div className='inline-flex justify-between items-center'>
                             {/* TODO: customize checkbox */}
-                            <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>مرا به خاطر بسپار</label>
+                            <label htmlFor={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='text-sm2 px-2 py-0.5'>
+                                {t('EnterPass.LabelRememberance')}
+                            </label>
                             <input name={AUTH_PAGE_ELEMENT.INPUT_REMEMBER_ME} className='h-4.5 w-4.5 checked:accent-primary' onChange={onChange} type='checkbox' checked={rememberMe} /></div>
                     </div>
                 </div>
-                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>ورود به منو</Button>
+                <Button disabled={disabled || hasError() || value.length <= 0} pending={pending} type='submit'>{t('EnterPass.ButtonSubmit')}</Button>
             </div>
         </>
     )

src/features/auth/components/StepNewPassword.tsx

@@ -4,6 +4,7 @@ import InputField from '@/components/input/InputField';
 import { AUTH_PAGE_ELEMENT } from '@/enums';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next';
 
 type Props = {
     onChange: ((e: React.ChangeEvent<HTMLInputElement>) => void) & React.ChangeEventHandler<HTMLInputElement>;
@@ -19,6 +20,7 @@ type Props = {
 function StepNewPassword({ isReset: reset = false, pending, disabled = false, onChange, onClick, value, repeatValue, passwordVisible, repeatPasswordVisible }: Props) {
     const [error, setError] = useState('');
     const [error2, setError2] = useState('');
+    const { t } = useTranslation();
 
     const hasError = (e = error) => {
         return e.trim().length > 0
@@ -29,20 +31,20 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
         let error2 = '';
         if (value.length > 0) {
             if (!/^.{6,}$/.test(value)) {
-                error = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error = t('Errors.PasswordLength');
             }
         }
         if (repeatValue.length > 0) {
             if (!/^.{6,}$/.test(repeatValue)) {
-                error2 = 'کلمه عبور باید شامل حداقل 6 کاراکتر باشد';
+                error2 = t('Errors.PasswordLength');
             } else if (repeatValue !== value) {
-                error2 = 'تکرار کلمه عبور  مطابقت ندارد';
+                error2 = t('Errors.PasswordMatch');
             }
         }
         
         setError(error);
         setError2(error2);
-    }, [value, repeatValue])
+    }, [value, repeatValue, t])
 
     return (
         <>
@@ -57,11 +59,11 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
             />
             <div className='w-full min-w-1/2 lg:max-w-1/2 h-full lg:px-9 py-7 flex flex-col justify-between lg:justify-center lg:gap-10'>
                 <div className='w-full'>
-                    <div className='pt-4' dir='rtl'>
+                    <div className='pt-4'>
                         <h6 className='text-lg font-bold'>
-                            {reset ? "تغییر کلمه عبور" : "انتخاب کلمه عبور"}
+                            {reset ? t('NewPassword.HeadingResetPass') : t('NewPassword.HeadingCreatePass')}
                         </h6>
-                        <p className='mt-3 text-[13px]'>کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@</p>
+                        <p className='mt-3 text-[13px]'>{t('NewPassword.Description')}</p>
                     </div>
                     <InputField
                         valid={!hasError()}
@@ -69,7 +71,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         autoComplete='new-password'
                         className='mt-10'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD}
-                        labelText='کلمه عبور'
+                        labelText={t('NewPassword.LabelPass')}
                         value={value}
                         placeholder=''
                         onChange={onChange}
@@ -84,7 +86,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         autoComplete='new-password'
                         className='mt-6'
                         htmlFor={AUTH_PAGE_ELEMENT.INPUT_PASSWORD_REPEAT}
-                        labelText='تکرار کلمه عبور'
+                        labelText={t('NewPassword.LabelRepeatPass')}
                         value={repeatValue}
                         placeholder=''
                         onChange={onChange}
@@ -94,7 +96,7 @@ function StepNewPassword({ isReset: reset = false, pending, disabled = false, on
                         </button>
                     </InputField>
                 </div>
-                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>ورود</Button>
+                <Button disabled={disabled || hasError() || hasError(error2) || value.length <= 0} pending={pending} type='submit'>{t('NewPassword.ButtonSubmit')}</Button>
             </div>
         </>
     )

src/lib/i18n.js

@@ -0,0 +1,41 @@
+import { createInstance } from 'i18next';
+import { initReactI18next } from 'react-i18next/initReactI18next';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import i18nConfig from '../../i18nConfig';
+
+export default async function initTranslations(
+  locale,
+  namespaces,
+  i18nInstance,
+  resources
+) {
+  i18nInstance = i18nInstance || createInstance();
+
+  i18nInstance.use(initReactI18next);
+
+  if (!resources) {
+    i18nInstance.use(
+      resourcesToBackend(
+        (language, namespace) =>
+          import(`@/locales/${language}/${namespace}.json`)
+      )
+    );
+  }
+
+  await i18nInstance.init({
+    lng: locale,
+    resources,
+    fallbackLng: i18nConfig.defaultLocale,
+    supportedLngs: i18nConfig.locales,
+    defaultNS: namespaces[0],
+    fallbackNS: namespaces[0],
+    ns: namespaces,
+    preload: resources ? [] : i18nConfig.locales
+  });
+
+  return {
+    i18n: i18nInstance,
+    resources: { [locale]: i18nInstance.services.resourceStore.data[locale] },
+    t: i18nInstance.t
+  };
+}

src/locales/en/auth.json

@@ -0,0 +1,39 @@
+{
+    "Enter": {
+        "Heading": "Login",
+        "Description": "Please enter your mobile number to log in.",
+        "LabelPhoneNumber": "Mobile Number",
+        "ButtonSubmit": "Next"
+    },
+    "OTP": {
+        "Heading": "Enter Activation Code",
+        "Description": "Please enter the 6-digit code sent to the number {phoneNumber}.",
+        "Label": "",
+        "TimerRunning": "{seconds} seconds left to receive the code",
+        "TimerOut": "Didn’t receive the code?",
+        "TimerReset": "Try again",
+        "ButtonSubmit": "Next"
+    },
+    "NewPassword": {
+        "HeadingCreatePass": "Choose Password",
+        "HeadingResetPass": "Change Password",
+        "Description": "The new password must be a combination of uppercase and lowercase letters and symbols, like A126bdz@",
+        "LabelPass": "Password",
+        "LabelRepeatPass": "Repeat Password",
+        "ButtonSubmit": "Login"
+    },
+    "EnterPass": {
+        "Heading": "Login",
+        "Description": "Please enter your password.",
+        "LabelPass": "Password",
+        "ButtonRecover": "Recover Password",
+        "LabelRememberance": "Remember me",
+        "ButtonSubmit": "Enter Menu"
+    },
+    "Errors": {
+        "PasswordLength": "Password must be at least 6 characters long",
+        "PasswordMatch": "Repeated password does not match",
+        "PhoneNumberFormat": "Phone number format is incorrect",
+        "OTPFormat": "Activation code is incomplete"
+    }
+}

src/locales/fa/auth.json

@@ -0,0 +1,39 @@
+{
+    "Enter": {
+        "Heading": "ورود به سیستم",
+        "Description": "برای ورود شماره همراه خود را وارد نمایید.",
+        "LabelPhoneNumber": "شماره همراه",
+        "ButtonSubmit": "بعدی"
+    },
+    "OTP": {
+        "Heading": "کد فعالسازی را وارد کنید",
+        "Description": "کد ۶ رقمی ارسال شده به شماره {phoneNumber} را وارد نمایید.",
+        "Label": "",
+        "TimerRunning": "{seconds} ثانیه دیگر تا دریافت کد",
+        "TimerOut": "کد را دریافت نکردید؟",
+        "TimerReset": "دوباره امتحان کنید",
+        "ButtonSubmit": "بعدی"
+    },
+    "NewPassword": {
+        "HeadingCreatePass": "انتخاب کلمه عبور",
+        "HeadingResetPass": "تغییر کلمه عبور",
+        "Description": "کلمه عبور جدید باید ترکیبی از حروف بزرگ و کوچک و نشانه ها باشد مثل A126bdz@",
+        "LabelPass": "کلمه عبور",
+        "LabelRepeatPass": "تکرار کلمه عبور",
+        "ButtonSubmit": "ورود"
+    },
+    "EnterPass": {
+        "Heading": "ورود به سیستم",
+        "Description": "کلمه عبور خود را وارد نمایید.",
+        "LabelPass": "کلمه عبور",
+        "ButtonRecover": "بازیابی کلمه عبور",
+        "LabelRememberance": "مرا به خاطر بسپار",
+        "ButtonSubmit": "ورود به منو"
+    },
+    "Errors": {
+        "PasswordLength": "کلمه عبور باید شامل حداقل 6 کاراکتر باشد",
+        "PasswordMatch": "تکرار کلمه عبور مطابقت ندارد",
+        "PhoneNumberFormat": "فرمت شماره تلفن اشتباه است",
+        "OTPFormat": "کد فعالسازی کامل نیست"
+    }
+}

src/middleware.ts

@@ -0,0 +1,12 @@
+import { i18nRouter } from 'next-i18n-router';
+import { NextRequest } from 'next/server';
+import i18nConfig from '../i18nConfig';
+
+export function middleware(request: NextRequest) {
+  return i18nRouter(request, i18nConfig);
+}
+
+// only applies this middleware to files in the app directory
+export const config = {
+  matcher: '/((?!api|static|favicon.ico|.*\\..*|_next).*)'
+};

tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/middleware.js", "src/components/utils/TranslationsProdiver.jsx"],
   "exclude": ["node_modules"]
 }