Languages

The languages that ship

English and Arabic. English is the default. Arabic lays the whole page out right to left, in the Noto Sans Arabic font.

How the language is chosen

• The language is the first part of the address, /en or /ar.
• The address / sends visitors to the language their browser prefers, English or Arabic, and to English otherwise.
• The switcher in the header has one link for every other language. It swaps that part of the address and keeps the visitor on the same page.
• Each page sets its language and direction, and lists the other language for search engines.

Change a text

Every visible word lives in messages/en.json and messages/ar.json. Both files have the same keys: change the value in each, never the key. A key missing from one file shows as its name on that language's page.

• Where each text lives

Right to left

src/i18n/direction.ts lists the right-to-left languages, and the layout sets the page's direction from it. The components use logical Tailwind classes such as ms-*, pe-*, start-* and text-start, so spacing and alignment mirror by themselves. Arrows that point in the reading direction carry rtl:rotate-180.

In markup you add, use the same logical classes instead of ml-*, pr-*, left-* or text-left. Otherwise it looks right in English and wrong in Arabic.

Add a language

1. 01

   Add its code

   Add the language's code to locales in src/i18n/routing.ts, for example fr.

   src/i18n/routing.tsCopy

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

   Add its messages

   Copy messages/en.json to messages/fr.json and translate the values. Add the language's name under localeSwitcher.names in every message file.
3. 03

   Right to left?

   If the language is written right to left, add its code to RTL_LOCALES in src/i18n/direction.ts.
4. 04

   Check the font

   src/app/[locale]/layout.tsx uses Noto Sans Arabic for ar and Inter, in Latin letters only, for every other language. A language in another script needs its own font there.

   Expected result: After a restart or a new build, the new language opens at its own address, such as /fr, and the switcher in the header links to it.