Languages

The languages that ship

Every text, image description, button label and the page's title and description exist in both languages, in messages/en.json and messages/ar.json.

How the language is chosen

• The language is the first part of the address, /en or /ar.
• A visitor who opens / is sent to /ar when the browser prefers Arabic, and to /en otherwise. src/middleware.ts does this.
• The language button in the header switches to the other language and keeps the visitor on the same page. Its labels are LocaleSwitcher.names in the message files.
• Each language has its own title, description and canonical address, and each page tells search engines where the other language is.

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 menu, the cards, the arrows and the table 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. An arrow that should point the other way in Arabic takes rtl:rotate-180.

Prices are written in the page's language by src/hooks/usePriceFormatter.ts.

Change a text

Change the value in messages/en.json and the matching one in messages/ar.json. Keep the keys the same in both files, and keep words in curly braces, such as {brand}, as they are.

• Where each text lives

The page's own Arabic labels

When you write about the page 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 file

   Copy the English file under the new code and translate every value. Keep every key and every word in curly braces.

   Terminalin landing-page-template-2Copy

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

   Name it in the language switcher

   Add the language's name under LocaleSwitcher.names in every message file, such as "fr": "Français". The header then shows a button for each language other than the current one.
4. 04

   Set its direction and font, if it needs them

   A right-to-left language goes in RTL_LOCALES in src/i18n/direction.ts. Every language other than Arabic uses Inter with Latin characters; for another script, add a font in src/lib/fonts.ts and pick it for that language in src/app/[locale]/layout.tsx.

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