Languages

The languages that ship

Every label, button, chart legend, table heading, form message and page title exists in both languages.

How the language is chosen

• The language is the first part of every address: /en/dashboard/analytics, /ar/dashboard/analytics.
• A visitor who opens / is sent to /ar when the browser prefers Arabic, and to /en otherwise. src/proxy.ts does this.
• The language menu in the header, a flag with its code, switches language and keeps the user on the same page. On a phone it is in the user menu. Language under Settings, Preferences does the same.

Right to left

On /ar, src/app/[locale]/layout.tsx sets lang="ar" and dir="rtl" on the page, so the whole layout mirrors: the sidebar moves to the right, and the cards, tables and menus read from right to left.

The components use logical Tailwind classes that follow the direction, such as ms-2, pe-4, start-0 and text-start. When you add markup, use these instead of ml-*, pr-*, left-* or text-left, or the Arabic page comes out wrong.

Where the texts live

The texts are split by page under messages/, each folder with an en.json and an ar.json:

Change a text

• Change the value in the English file and the matching one in the Arabic file. Keep the keys the same in both.
• A key missing from one file shows its name in place of the text on that language's page.
• Words in curly braces, such as {theme}, are filled in by the app. Keep them as they are.

The dashboard's own Arabic labels

When you write about the dashboard in Arabic, use the labels it shows:

Add a language

1. 01

   Add its code to the routing

   Add the language code to locales in src/i18n/routing.ts. For example French:

   src/i18n/routing.tsCopy

   locales: ['en', 'ar', 'fr'],
2. 02

   Add its message files

   In each of the eight folders under messages/, copy en.json under the new code and translate the values. Keep every key and every word in curly braces. src/i18n/request.ts loads them by the language code, so every folder needs the file. For the common folder:

   Terminalin dashboard-template-1Copy

   cp messages/common/en.json messages/common/fr.json
3. 03

   Add it to the language menu

   Add it to languageOptions in src/components/LanguageSelector.tsx, with its name, a short label and a flag from country-flag-icons, such as { id: "fr", label: "Français", shortLabel: "FR", Flag: FR } with FR added to the flags import.
4. 04

   Set its direction and font, if it needs them

   Only Arabic is treated as right to left. For another right-to-left language, extend the locale === "ar" checks in src/app/[locale]/layout.tsx, src/components/calendar.tsx, src/components/themeToggle.tsx, src/features/dashboard/overview/components/CardSection/CardStack/index.tsx and the quick transfer's QuickTransferSheet/index.tsx. For a script Inter does not cover, add a font with next/font in layout.tsx.

Restart yarn dev, or build again, and the new language answers at its own address, here /fr/login.