Considering that there will be users from multiple different countries, you might need to add the support for multiple help you with that, we have made the template 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 packages accept-language react-i18next i18next i18next-browser-languagedetector i18next-resources-to-backend and you can install it by running the following commands in the terminal.

npm install accept-language react-i18next i18next i18next-browser-languagedetector i18next-resources-to-backend

You will find language translator logic and design at below given path:

Implementing Language Translate Feature

After you finished installing above mentioned packages in your project, follow the below given steps to add the multi-language support.

"use client";

import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import resourcesToBackend from "i18next-resources-to-backend";
import React, { useMemo } from "react";
import { I18nextProvider as Provider, initReactI18next } from "react-i18next";

import { getOptions } from "./settings";

i18next
  .use(initReactI18next)
  .use(LanguageDetector)
  .use(resourcesToBackend((language, namespace) => import(`./locales/${language}/${namespace}.json`)))
  .init({
    ...getOptions(),
    detection: {
      caches: ["cookie"],
    },
  });

export function I18nProvider({ children, language }) {
  useMemo(() => {
    i18next.changeLanguage(language);
  }, []);
  return {children};
}
                     

export const fallbackLng = "en";
export const languages = [fallbackLng, , "ar", "fr", "es"];
export const defaultNS = "translation";

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

JSON files for different languages

To translate words we have to provide the translation for each word, that we will do in a json file.

{
"ReadMore": "Read More",
"Category": "Category",
"RecentPost": "Recent Post",
"ProductTags": "Product Tags",
}

{
"ReadMore": "اقرأ المزيد",
"Category": "الفئة",
"RecentPost": "المشا ركات الأخيرة",
"ProductTags": "وسوم المنتج",
}

{
"ReadMore": "Leer Más",
"Category": "Categoría",
"RecentPost": "Publicación Reciente",
"ProductTags": "Etiquetas de Producto",
}

{
"ReadMore": " Lire la suite",
"Category": " Catégorie",
"RecentPost": " Article récent",
"ProductTags": " Étiquettes de produit",
}

For Example:

Use a variable as follows:

import { useTranslation } from "react-i18next";

const AboutUsText = () => {
const { t } = useTranslation( 'common');
  return (
  <h4>{t("AboutUs")}</h4>
 );
};

export default AboutUsText;

Warning: Make sure that if you are using a variable then you have added the translation for every word possible in that variable in the json file.