Langues

Les langues incluses

Ouvrir / envoie le visiteur vers la langue que son navigateur préfère, et vers l'anglais s'il ne préfère aucune des deux. La barre de menu a un bouton pour l'autre langue ; sur téléphone, il se trouve dans le menu.

De droite à gauche

La mise en page définit lang et dir sur la page selon la langue, donc en arabe le texte, la barre de menu, le texte produit et les boutons vont de droite à gauche. La roue 3D, les fruits flottants, la glace et le mot géant derrière les canettes gardent leur propre orientation dans les deux langues.

Le texte arabe utilise la police Cairo, via la règle html[lang="ar"] body dans src/app/globals.css. Les langues qui s'écrivent de droite à gauche sont celles de la liste RTL_LOCALES dans src/i18n/routing.ts.

Ajouter une langue

Les étapes ajoutent le français, fr. Utilisez le code à deux lettres de la langue.

1. 01

   Ajoutez le code au routage

   Dans src/i18n/routing.ts, ajoutez-le à locales. Si la langue s'écrit de droite à gauche, ajoutez-le aussi à RTL_LOCALES.

   src/i18n/routing.tsCopier

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

   Créez son fichier de messages

   Copiez le fichier anglais, puis traduisez chaque valeur. Gardez les clés telles quelles.

   Terminaldans juicyCopier

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

   Nommez-la dans le changement de langue

   Le sélecteur affiche chaque langue sous son propre nom, depuis localeSwitcher.names. Ajoutez le nouveau nom à chaque fichier de messages, y compris le nouveau.

   messages/en.jsonCopier

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

   Redémarrez et ouvrez-la

   Arrêtez yarn dev et relancez-le, puis ouvrez localhost:3030/frLocal.

   Résultat attendu: La page s'ouvre dans la nouvelle langue, et la barre de menu affiche un bouton pour chacune des deux autres.

   Un problème ?

Une langue dans une écriture que ni Arial ni Cairo ne couvrent a besoin de sa propre police : chargez-la dans src/app/[locale]/layout.tsx comme Cairo, et ajoutez-lui une règle dans src/app/globals.css comme celle de l'arabe.

Changer la langue par défaut ou retirer une langue

defaultLocale dans src/i18n/routing.ts est la langue qu'obtient un visiteur quand son navigateur ne préfère aucune des vôtres. Pour retirer une langue, enlevez-la de locales et de RTL_LOCALES, supprimez son fichier de messages, et retirez son nom sous localeSwitcher.names dans les autres fichiers. Avec une seule langue restante, le sélecteur de langue n'affiche aucun bouton.