Multi-Language Support
Considering that there will be users from multiple different countries, you might need to add the support for multiple languages.To help you with that, we have made the sidebar compatible with the multiple language functionality.
You can find the dropdown that changes the language in the header.

How does multi-language functionality works?
We have used the package react-i18next, you can install it by running the following command in the terminal.
npm i react-i18next
react-i18next package configuration and implementation in the project:
After you finished installing react-i18next package in your project, follow the below given steps to add the multi-language support.
-
react-i18next.Now import this package at the top of the file and add the json related to our required languages. Refer the below given code to get more information about it. Create one file inside the src folder, this file will contain the package react-i18next. Now import this package at the top of the file and add the json related to our required languages. Refer the below given code to get more information about it.
i18n.tsx as the file name. We recommend that you use the same naming convention. Tip: We are using the i18n.tsx as the file name. We recommend that you use the same naming convention.
import i18n from 'i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import { initReactI18next } from 'react-i18next';
-
Create a JSON in that file, for providing the corresponding translated word for the english words. Now
Create a JSON in that file, for providing the corresponding translated word for the english words.//ae.json en: { translations: { "General": "General", "Dashboard": "Dashboard", "Default": "Default", "Ecommerce": "Ecommerce", "Chart": "Chart" } }, //ae.json ae: { translations: { "General": "جنرال لواء", "Dashboard": "لوحة القيادة", "Default": "إفتراضي", "Ecommerce": "التجارة الإلكترونية", "Chart": "مخطط" } }, //cn.json cn: { translations: { "General": "一般", "Dashboard": "仪表板", "Default": "默认", "Ecommerce": "电子商务", "Chart": "图表" } }, //de.json de: { translations: { "General": "Algemeen", "Dashboard": "Dashboard", "Default": "Standaard", "Ecommerce": "E-commerce", "Chart": "Grafiek" } }, //es.json es: { translations: { "General": "General", "Dashboard": "Tablero", "Default": "Defecto", "Ecommerce": "Comercio electrónico", "Chart": "Gráfico" } }, //fr.json cn: { translations: { "General": "Générale", "Dashboard": "Tableau de bord", "Default": "Défaut", "Ecommerce": "Commerce électronique", "Chart": "Graphique" } }, //pt.json pt: { translations: { "General": "Geral", "Dashboard": "painel de controle", "Default": "Padrão", "Ecommerce": "Comércio eletrônico", "Chart": "Gráfico" }, }
-
react-i18next package. Create a file client.ts and import the useTranslation from react-i18next package.
import { useTranslation } from 'react-i18next';
-
In the Language file we are passing the params as same as we have mention in the JSON file. To get more idea about this refer the below code.
import { LanguagesData } from "@/Data/Layout"; import { useAppDispatch, useAppSelector } from "@/Redux/Hooks"; import { setLanguage } from "@/Redux/Reducers/LanguageSlice"; import { ChangeLngType } from "@/Types/LayoutTypes"; import { useTranslation } from "@/app/i18n/client"; import { usePathname, useRouter } from "next/navigation"; import { useEffect } from "react"; const Languages = () => { const { i18LangStatus } = useAppSelector((state) => state.langSlice); const { i18n } = useTranslation(i18LangStatus); const pathname = usePathname(); const router = useRouter(); const dispatch = useAppDispatch(); const changeLng = (item:ChangeLngType) => { dispatch(setLanguage(item.data)); i18n.changeLanguage(item.language); const languageCodeRegex = /^\/[a-z]{2}(\/|$)/; const updatedPath = pathname.replace(languageCodeRegex, `/${item.data}$1`); router.push(updatedPath); }; useEffect(() => { const pathSegments = pathname.split("/").filter(Boolean); if (pathSegments.length > 0) { const language = pathSegments[0]; if (language !== i18LangStatus) { dispatch(setLanguage(language)); } } }, []); return ( <li className="onhover-dropdown"> <div className="cart-box text-uppercase f-w-700">{i18LangStatus}</div> <div className="language-dropdown onhover-show-div language-width"> <ul className="language-list"> {LanguagesData.map((item, i) => ( <li className="p-0" key={i} onClick={() => {changeLng(item)}}> <a className="text-decoration-none" data-lng={item.data}> <i className={item.logo} /> {item.language} </a> </li> ))} </ul> </div> </li> ); }; export default Languages;
-
Now we need to wrap the content to get reflect of languages. Below are the given example.
import React, { Fragment, useState } from 'react'; import { useTranslation } from '@/app/i18n/client'; const SidebarMenuItems = () => { const { t } = useTranslation(); return( <ul> <li>{t('Dashboard')}</li> <li>{t('Ecommerce')}</li> </ul> ) } export default SidebarMenuItems;
Tip: For more information on react-i18next you can visit the official documentation on react-i18next