Langues

Les langues livrées

Chaque texte, libellé de bouton, description d'image, message de formulaire et titre de page existe dans les deux langues.

Comment la langue est choisie

• La langue est la première partie de chaque adresse : /en/pricing, /ar/pricing.
• Un visiteur qui ouvre / est envoyé vers /ar quand son navigateur préfère l'arabe, et vers /en sinon. C'est src/proxy.ts qui s'en charge.
• Le menu de langue de l'en-tête passe à l'autre langue et garde le visiteur sur la même page.
• Chaque langue a son propre titre, sa propre description et sa propre adresse canonical, et chaque page indique aux moteurs de recherche où se trouve l'autre langue.

De droite à gauche

Sur /ar, src/app/[locale]/layout.tsx définit lang="ar" et dir="rtl" sur la page, si bien que toute la mise en page est inversée : le menu, les cartes, les flèches et les tableaux se lisent de droite à gauche.

Les composants utilisent des classes Tailwind logiques qui suivent le sens d'écriture, comme ms-2, pe-4, start-0 et text-start. Quand vous ajoutez du code, utilisez-les à la place de ml-*, pr-*, left-* ou text-left, sinon la page arabe s'affiche mal.

L'aperçu du tableau de bord dans le hero garde une mise en page de gauche à droite dans les deux langues, comme le ferait une vraie capture d'écran de produit. Ses libellés sont traduits.

Où se trouvent les textes

Les textes sont répartis par page dans sept dossiers sous messages/, chacun avec un en.json et un ar.json :

Modifier un texte

• Changez la valeur dans le fichier anglais et celle qui lui correspond dans le fichier arabe. Gardez les mêmes clés dans les deux.
• Une clé absente d'un fichier affiche son nom à la place du texte sur la page de cette langue.
• Les mots entre accolades, comme {year}, {count} et {planName}, sont remplis par le site. Gardez-les tels quels.

Les libellés arabes du site

Quand vous écrivez sur le site en arabe, utilisez les libellés qu'il affiche :

Ajouter une langue

1. 01

   Ajoutez son code au routage

   Ajoutez le code de la langue à locales dans src/i18n/routing.ts, ainsi qu'à Locale, locales et localeNames dans src/config/i18n.ts. Par exemple, le français :

   src/i18n/routing.tsCopier

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

   Ajoutez ses fichiers de messages

   Dans chacun des sept dossiers sous messages/, copiez en.json sous le nouveau code et traduisez les valeurs. Gardez chaque clé et chaque mot entre accolades. Pour le dossier home :

   Terminaldans Nextjs-landing-page-template-2Copier

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

   Ajoutez-la au menu de langue

   Ajoutez-la à la liste languages dans src/components/LanguageSwitcher.tsx, avec le pays du drapeau affiché, par exemple { code: "fr", country: "FR" }.
4. 04

   Définissez son sens d'écriture et sa police, si besoin

   Seul l'arabe est traité de droite à gauche. Pour une autre langue de droite à gauche, étendez les vérifications locale === "ar" dans src/app/[locale]/layout.tsx, src/hooks/locale/useDirection.ts, src/features/home/TestimonialsSection/hooks/useTestimonialsCarousel.ts et src/features/auth/forgot-password/components/ForgotPasswordForm/components/BackToSignInLink.tsx. Pour une écriture que DM Sans ne couvre pas, ajoutez une police avec next/font dans layout.tsx.

Redémarrez yarn dev, ou reconstruisez, et la nouvelle langue répond à sa propre adresse, ici /fr. Les liens canoniques, les liens de langue et le sitemap la prennent en compte d'eux-mêmes.