Languages

The languages it ships in

Opening / sends the visitor to the language their browser prefers, and to English when it prefers neither. The menu bar has a button for the other language; on phones it is in the menu.

Right to left

The layout sets lang and dir on the page from the language, so in Arabic the text, the menu bar, the product text and the buttons run right to left. The 3D wheel, the floating fruits, the ice and the giant word behind the cans keep their own orientation in both languages.

Arabic text uses the Cairo font, through the rule html[lang="ar"] body in src/app/globals.css. Which languages run right to left is the list RTL_LOCALES in src/i18n/routing.ts.

Add a language

The steps add French, fr. Use the language's two-letter code.

1. 01

   Add the code to the routing

   In src/i18n/routing.ts, add it to locales. If the language is written right to left, add it to RTL_LOCALES too.

   src/i18n/routing.tsCopy

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

   Create its message file

   Copy the English file, then translate every value. Keep the keys as they are.

   Terminalin juicyCopy

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

   Name it in the language switch

   The switch shows each language by its own name, from localeSwitcher.names. Add the new name to every message file, including the new one.

   messages/en.jsonCopy

   "names": {
     "en": "English",
     "ar": "العربية",
     "fr": "Français"
   }
4. 04

   Restart and open it

   Stop yarn dev and start it again, then open localhost:3030/frLocal.

   Expected result: The page opens in the new language, and the menu bar shows a button for each of the other two.

   Having trouble?

A language in a script that Arial and Cairo do not cover needs a font of its own: load it in src/app/[locale]/layout.tsx like Cairo, and add a rule for it in src/app/globals.css like the Arabic one.

Change the default or remove a language

defaultLocale in src/i18n/routing.ts is the language a visitor gets when the browser prefers none of yours. To remove a language, take it out of locales and RTL_LOCALES, delete its message file, and remove its name under localeSwitcher.names in the other files. With one language left, the language switch shows no button.