Langues

Les langues livrées

Chaque texte visible vient de messages/en.json ou messages/ar.json, y compris les textes alternatifs, les libellés de boutons pour les lecteurs d'écran, ainsi que le titre et la description de la page.

Comment la langue est choisie

• La langue est la première partie de l'adresse : /en ou /ar.
• Une adresse sans langue, comme /, redirige vers la langue du visiteur : l'arabe pour un navigateur réglé en arabe, l'anglais pour tous les autres. Pour le reste de la session du navigateur, elle retient la dernière langue ouverte, dans un cookie NEXT_LOCALE.
• /en et /ar ouvrent toujours leur propre langue.
• Le sélecteur de langue de la barre de navigation et du menu mobile affiche le nom de l'autre langue et garde le visiteur sur la page.
• Les attributs lang et dir de la page suivent la langue, tout comme le lien canonique et les liens de langue pour les moteurs de recherche.

Modifier un texte

Modifiez la valeur dans les deux fichiers de messages et gardez la clé. Une clé absente d'un fichier s'affiche comme une erreur de message manquant sur la page de cette langue : gardez donc les deux fichiers synchronisés.

• Quelle clé contient quel texte

De droite à gauche

Le layout utilise des classes Tailwind logiques comme ms-*, pe-*, start-* et end-* : les marges, les espacements internes et les positions s'inversent d'eux-mêmes en arabe. Utilisez-les, et non ml-* ou left-*, quand vous ajoutez du balisage. Les icônes de flèche se retournent avec rtl:-scale-x-100.

Les libellés arabes du site

Quand vous écrivez sur le site en arabe, utilisez les libellés affichés par sa page :

Ajouter une langue

Avec le français comme exemple, code fr :

1. 01

   Ajoutez-la au routage

   Dans src/i18n/routing.ts, ajoutez le code à locales :

   src/i18n/routing.tsCopier

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

   Créez son fichier de messages

   Copiez le fichier anglais et traduisez ses valeurs. Gardez toutes les clés.

   Terminaldans landing-page-template-1Copier

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

   Nommez-la dans le sélecteur de langue

   Ajoutez "fr": "Français" sous localeSwitcher.names dans chaque fichier de messages.
4. 04

   Donnez-lui une locale pour les cartes sociales

   Dans src/i18n/openGraphLocales.ts, ajoutez fr: "fr_FR". La vérification des types du build échoue tant que chaque langue n'y a pas d'entrée.
5. 05

   Pour une langue de droite à gauche uniquement

   Ajoutez son code à RTL_LOCALES dans src/i18n/getDirection.ts. Le layout charge Noto Sans Arabic pour ar seulement : pour une autre écriture, chargez une police adaptée dans src/app/[locale]/layout.tsx.