Skip to main content
title

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