Languages

The languages that ship

Every visible text comes from messages/en.json or messages/ar.json, including the alt texts, the button labels for screen readers and the page's title and description.

How the language is chosen

• The language is the first part of the address: /en or /ar.
• An address without one, such as /, redirects to the visitor's language: Arabic for a browser set to Arabic, English for every other. For the rest of the browser session it remembers the last language opened, in a NEXT_LOCALE cookie.
• /en and /ar always open their own language.
• The language switch in the navbar and the mobile menu shows the other language's name and keeps the visitor on the page.
• The page's lang and dir follow the language, and so do the canonical and language links for search engines.

Change a text

Change the value in both message files and keep the key. A key missing from one file shows as a missing-message error on that language's page, so keep the two files in step.

• Which key holds which text

Right to left

The layout uses logical Tailwind classes such as ms-*, pe-*, start-* and end-*, so margins, padding and positions flip by themselves in Arabic. Use them, not ml-* or left-*, when you add markup. Arrow icons turn around with rtl:-scale-x-100.

The site's own Arabic labels

When you write about the site in Arabic, use the labels its page shows:

Add a language

French as the example, with the code fr:

1. 01

   Add it to the routing

   In src/i18n/routing.ts, add the code to locales:

   src/i18n/routing.tsCopy

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

   Create its message file

   Copy the English file and translate its values. Keep every key.

   Terminalin landing-page-template-1Copy

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

   Name it in the language switch

   Add "fr": "Français" under localeSwitcher.names in every message file.
4. 04

   Give it a social card locale

   In src/i18n/openGraphLocales.ts, add fr: "fr_FR". The build's type check fails until every language has an entry there.
5. 05

   For a right-to-left language only

   Add its code to RTL_LOCALES in src/i18n/getDirection.ts. The layout loads Noto Sans Arabic for ar only: for another script, load a font for it in src/app/[locale]/layout.tsx.