Languages

The languages that ship

English and Arabic, in all three apps. Arabic lays the whole interface out right to left, with its own fonts on the storefront.

English is the default. Products and categories are stored with a name and description in both languages, entered side by side in the dashboard.

How the language is chosen

• The language is the first part of the address. A path without one goes to /en; the browser's language is not detected.
• The language switcher swaps that part of the address and keeps the page.
• On the storefront, the direction is set before the first paint, so an Arabic page never flashes left to right.
• Both frontends send the page's language to the API, so its messages come back in the same language.

Change a text

Every visible word lives in messages/<namespace>/en.json and ar.json, in each frontend's folder. Change the value, keep the key, and change it in both files.

• A key missing from ar.json shows as a missing-message error on the Arabic side, so keep the two files in step.
• The admin's sidebar labels are the exception: they are written in English and Arabic in src/layouts/dashboard/sidebar/config/navigationData.ts.
• Text inside {curly} braces is filled in by the app, such as {brand}. Keep those words as they are in both languages.

The apps' own Arabic labels

When you write about the store in Arabic, use the labels its screens show:

The roles page and the settings tab call staff المشرفين where the sidebar says المسؤولين. Pick one word and change the other in messages/dashboard/settings/ if the difference matters to you.

What the API translates

• Error messages and the message of a successful write come back in the language of the Accept-Language header. ar-SA counts as Arabic; any language the API does not have falls back to English.
• Its texts are JSON files in back-end/src/i18n/translations/en/ and ar/, one per area: admin, auth, category, common, countries, order, product, project, roles, settings, tasks, users.
• Products and categories come back with both languages, as { "en": "…", "ar": "…" }, and the frontend picks one.

Add a language to the storefront

The two languages are written into several files, so adding a third touches each of them. Paths are inside storefront/.

1. 01

   Add the language code

   Add it to the locale lists in src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx and src/components/LanguageSwitcher.tsx, and to src/lib/seo/ogLocales.ts.
2. 02

   Translate the messages

   Copy en.json to <code>.json in each of the 12 folders under messages/ and translate the values.
3. 03

   Set the direction

   For a right-to-left language, add it to RTL_LOCALES in src/app/layout.tsx and to src/hooks/locale/useDirection.ts.
4. 04

   Widen the brand and manifest

   src/config/brand.config.ts and src/app/[locale]/manifest.ts hold an en and an ar value per text: add yours. Search src/features/ for "en" | "ar" and widen those types too.
5. 05

   Add a font for its script

   If the language needs letters the shipped fonts lack, add a font to the Google Fonts link in src/app/layout.tsx and use it in src/styles/base.css.

Add a language to the admin dashboard

Paths are inside admin-dashboard/.

1. 01

   Add the language code

   Add it to the locale lists in src/config/i18n.ts, src/proxy.ts, src/app/[locale]/layout.tsx and src/components/LanguageSwitcher.tsx.
2. 02

   Translate the messages

   Add a <code>.json beside every en.json under messages/, including the folders inside messages/dashboard/.
3. 03

   Translate the sidebar

   Add your language to each label in src/layouts/dashboard/sidebar/config/navigationData.ts, and to the texts in src/config/brand.config.ts and src/app/[locale]/manifest.ts.
4. 04

   Set the direction

   For a right-to-left language, add it to src/hooks/locale/useDirection.ts.

Add a language to the API

1. 01

   Add the language code

   Add it to supportedLocales in back-end/src/i18n/i18n.service.ts.
2. 02

   Translate the messages

   Copy back-end/src/i18n/translations/en/ to a folder named after the code and translate the values. A key you leave out falls back to English.