Cairo - Next Document

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 i18next 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.

To enable translation for a new language, you need to create a JSON file following this path: 'src/app/i18n/locales'. Create a folder for the language, such as 'ae' for Arabic. Inside this folder, create a file named 'common.json'. Now add corresponding translated word for the arabic words.

Refer the below folder structure

src
- app
  - i18n
    - locales
      - ae
        
        common.json

//common.json 
{
  "General": "عامة",
  "Dashboards": "لوحات القيادة",
  "Default": "افتراضي",
  "Project": "مشروع",
  "Ecommerce": "التجارة الإلكترونية",
  "Education": "التعليم",
  "Widgets": "حاجيات",
  "Chart": "رسم بياني",
  "Applications": "تطبيقات",
  "Project List": "قائمة المشروع",
}

Now add object having an exact keys used in below languageData.

languageParameter : stands for language locale.
languageName : stands for your language name.
languageIconClassName : represents the national flag of the nation where this language originated.

path : src/Data/Layout/Header/LanguageData.ts

export const LanguagesData = [
{
  data: "en",
  logo: "flag-icon flag-icon-us",
  language: "English",
}, 
{
  data: "fr",
  logo: "flag-icon flag-icon-nz",
  language: "French",
},
{
  data: "ae",
  logo: "flag-icon flag-icon-ae",
  language: "لعربية",
},                 
{
  data: "cn",
  logo: "flag-icon flag-icon-cn",
  language: "简体中文",
},
];

If you have to change the default langauge or have to add new langauge in your application,you will need to follow some steps.
first of all open the setting.ts file. // src/app/i18n/settings.ts
1. fallbackLng is your application's default language. if you have change the default language replace value of fallbackLng with your desire langauge locale. for example: replace "en" with "ae" if you need to switch the default language from English to Arabic.
2. languages is a term that describes the number of languages that your application supports. if you have to add more language, add the folder name which you have created in locales in languages variable.
```
export const fallbackLng = "en";
export const languages = ["en", "ae", "fr", "es", "du", "pt", "cn"];
export const defaultNS = "translation";

export function getOptions(ns = defaultNS) {
  return {
    supportedLngs: languages,
    fallbackLng,
    fallbackNS: defaultNS,
    defaultNS,
    ns,
  };
}
```

We have now wrapped the entire app component with an I18nProvider that has a prop language whose value will be your current language in order to access the languages throughout the entire app.

import { Poppins, Roboto } from "next/font/google";
import NoSsr from "@/utils/NoSsr";
import { Rubik } from "next/font/google";
import type { Metadata } from "next";
import "../../src/index.scss";
import { RootLayoutProps } from "@/Types/LayoutTypes";
import MainProvider from "./MainProvider";
import { I18nProvider } from "./i18n/i18n-context";
import { detectLanguage } from "./i18n/server";
import { getServerSession } from "next-auth";
import { authoption } from "./api/auth/[...nextauth]/authOption";
import SessionWrapper from "@/CommonComponent/SessionWrapper";
import { CustomToaster } from "@/utils/Toaster";

const rubik = Rubik({
  weight: ["400", "500", "600", "700"],
  style: ["normal", "italic"],
  subsets: ["latin"],
  display: "swap",
  variable: "--rubik",
});

export const metadata: Metadata = {
  title: "Cairo - Premium Admin Template",
};

const RootLayout = async ({ children }: RootLayoutProps) => {
  const lng = await detectLanguage();
  const session = await getServerSession(authoption);

  return (
    <I18nProvider language={lng}>
      <html>
        <head>
          <link rel='icon' href='/assets/images/favicon.png' type='image/x-icon' />
          <link rel='shortcut icon' href='/assets/images/favicon.png' type='image/x-icon' />
          <link rel='preconnect' href='https://fonts.googleapis.com' />
          <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='' />
          <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAjeJEPREBQFvAIqDSZliF0WjQrCld-Mh0'></script>
        </head>
        <body suppressHydrationWarning={true} className={`${rubik.className}`}>
          <SessionWrapper session={session}>
            <NoSsr>
              <MainProvider>{children}</MainProvider>
              <CustomToaster/>
            </NoSsr>
          </SessionWrapper>
        </body>
      </html>
    </I18nProvider>
  );
};

export default RootLayout;

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 { useRouter } from "next/navigation";
import { LanguagesData } from "@/Data/Layout";
import { ChangeLngType } from "@/Types/LayoutTypes";
import { useRouter } from "next/navigation";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";

const Languages = () => {
  const { i18n } = useTranslation();
  const currentLanguage = i18n.resolvedLanguage;
  const router = useRouter();

  const changeLng = (item: ChangeLngType) => {
    i18n.changeLanguage(item.data);
  };

  useEffect(() => {
   LanguagesData.find((data) => data.data == currentLanguage);
    router.refresh();
  }, [currentLanguage, router]);

  return (
    <li className="onhover-dropdown">
      <div className="cart-box text-uppercase f-w-700">{currentLanguage}</div>
      <div className="language-dropdown onhover-show-div language-width">
        <ul className="language-list">
          {LanguagesData.map((item, index) => (
            <li
              key={index}
              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 'react-i18next';

const SidebarMenuItems = () => {

const { t } = useTranslation("common");

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