Langues

Les langues livrées

L'anglais et l'arabe. L'anglais est la langue par défaut. L'arabe affiche toute la page de droite à gauche, avec la police Noto Sans Arabic.

Comment la langue est choisie

• La langue est la première partie de l'adresse, /en ou /ar.
• L'adresse / envoie les visiteurs vers la langue que préfère leur navigateur, l'anglais ou l'arabe, et vers l'anglais dans les autres cas.
• Le sélecteur de l'en-tête a un lien pour chacune des autres langues. Il change cette partie de l'adresse et garde le visiteur sur la même page.
• Chaque page indique sa langue et son sens d'écriture, et signale l'autre langue aux moteurs de recherche.

Modifier un texte

Chaque mot visible se trouve dans messages/en.json et messages/ar.json. Les deux fichiers ont les mêmes clés : modifiez la valeur dans chacun, jamais la clé. Une clé absente d'un fichier s'affiche sous son nom sur la page de cette langue.

• Où se trouve chaque texte

De droite à gauche

src/i18n/direction.ts liste les langues écrites de droite à gauche, et la mise en page en déduit le sens de la page. Les composants utilisent des classes Tailwind logiques comme ms-*, pe-*, start-* et text-start : les espacements et les alignements s'inversent donc d'eux-mêmes. Les flèches qui pointent dans le sens de lecture portent rtl:rotate-180.

Dans le balisage que vous ajoutez, utilisez les mêmes classes logiques au lieu de ml-*, pr-*, left-* ou text-left. Sinon, il s'affichera bien en anglais et mal en arabe.

Ajouter une langue

1. 01

   Ajoutez son code

   Ajoutez le code de la langue à locales dans src/i18n/routing.ts, par exemple fr.

   src/i18n/routing.tsCopier

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

   Ajoutez ses messages

   Copiez messages/en.json en messages/fr.json et traduisez les valeurs. Ajoutez le nom de la langue sous localeSwitcher.names dans chaque fichier de messages.
3. 03

   De droite à gauche ?

   Si la langue s'écrit de droite à gauche, ajoutez son code à RTL_LOCALES dans src/i18n/direction.ts.
4. 04

   Vérifiez la police

   src/app/[locale]/layout.tsx utilise Noto Sans Arabic pour ar et Inter, en caractères latins uniquement, pour toute autre langue. Une langue écrite dans un autre alphabet a besoin de sa propre police à cet endroit.

   Résultat attendu: Après un redémarrage ou un nouveau build, la nouvelle langue s'ouvre à sa propre adresse, comme /fr, et le sélecteur de l'en-tête y renvoie.