Multi-Language

​

Multi-Language Support

To accommodate users from diverse regions, SaasCart includes built-in multi-language functionality, making the platform accessible worldwide. The language selection dropdown is located in the header.

​

How Does Multi-Language Functionality Work?

SaasCart uses the following packages to implement multi-language support:
accept-language, react-i18next, i18next, i18next-browser-languagedetector, and i18next-resources-to-backend.

To install these packages, run:

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

You can find the language translation logic and design at the following path:
src/app/i18n/i18n-context.jsx

​

Implementing the Language Translate Feature

After installing the required packages, follow these steps to add multi-language support.

​

1. Set Up i18n-context.jsx

"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 <Provider i18next={i18next}>{children}</Provider>;
}

​

2. Configure settings.js

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 Language Translations

Create a JSON file for each language with translations for words or phrases.

Example JSON Files:

• English (/en/common.json):

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

• Arabic (/ar/common.json):

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

• Spanish (/es/common.json):

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

• French (/fr/common.json):

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

​

Using the t Function for Translations

To use a variable for translations, import useTranslation from react-i18next.

import { useTranslation } from "react-i18next";

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

export default AboutUsText;

Warning: Ensure that translations are provided for each term in the JSON files to avoid missing translations.