Aller à l'article
Aniq-UI

NorthstackLangues

Langues

Comment le site et le tableau de bord fonctionnent en anglais et en arabe, comment changer un texte, ce que traduit l'API, et ce qu'il faut changer pour ajouter une langue.

Pour le pack Full Stack

Les langues livrées

Anglais et arabe, dans les trois applications. L'arabe dispose toute l'interface de droite à gauche, avec ses propres polices, et le nom du produit reste Northstack en lettres latines dans les deux langues. Les prix du site sont écrits de la même façon dans les deux, le signe dollar en premier avec des chiffres latins.

ApplicationAnglaisArabe
Site/en/…/ar/…
Tableau de bord/en/…/ar/…
APIAccept-Language: enAccept-Language: ar

L'anglais est la langue par défaut. Le français, l'espagnol et d'autres langues ne sont pas inclus ; les sections ci-dessous disent ce qu'il faut pour en ajouter une.

Comment la langue est choisie

  • La langue est la première partie de l'adresse. Le menu Language la change et garde la page.
  • Le site : un chemin sans langue est redirigé par next-intl vers le choix précédent du visiteur ou la langue de son navigateur quand c'est l'anglais ou l'arabe, et vers /en sinon. Le sitemap liste chaque page dans les deux langues, chacune avec son alternative.
  • Le tableau de bord : un chemin sans langue s'ouvre dans la langue que le tableau de bord a servie en dernier dans ce navigateur (le cookie NEXT_LOCALE), l'anglais sinon, et l'adresse nue ouvre /<language>/dashboard. Chaque requête qu'il fait envoie la langue de la page à l'API dans Accept-Language.
  • Un lien de réinitialisation du mot de passe ouvre le tableau de bord dans la langue dans laquelle la réinitialisation a été demandée, et les pages de retour du paiement des licences s'ouvrent dans la langue dans laquelle l'acheteur a payé.

Modifier un texte

Chaque mot visible se trouve dans messages/<namespace>/en.json et ar.json, dans le dossier de chaque frontend. Changez la valeur, gardez la clé, et faites la modification dans les deux fichiers.

ApplicationNamespaces
Sitelayout, home, pricing, checkout, docs, blog, changelog, contact, legal, sampleData. Les textes de la documentation, du journal et du changelog sont dans src/content/docs/, src/content/journal/ et src/content/changelog/, un en.json et un ar.json chacun.
Tableau de bordai-assistant, auth, common, dashboard (avec un dossier par domaine : activity, billing, overview, platform, projects, roles, settings avec adminmanagement, adminroles, appsettings, profile et security, team, ui-component, users), invitation, layouts, metadata (les titres d'onglet), onboarding
  • Une clé absente de ar.json apparaît comme un message manquant côté arabe : gardez donc les deux fichiers synchronisés.
  • Le texte entre accolades {curly} est rempli par l'application, comme {count} ou {license}. Gardez ces mots tels quels dans les deux langues, et gardez les balises à l'intérieur d'un message, comme <code> ou <card>, autour de leur texte.

Le texte que l'espace de travail stocke dans les deux langues

  • Le nom et la description d'un projet, le titre et la description d'une tâche sont conservés par langue, sous la forme translations: { en, ar }. Le nom ou titre anglais est obligatoire ; l'arabe est facultatif, et le tableau de bord arabe affiche le texte anglais partout où l'arabe est vide. Le seed remplit les deux pour chaque projet et chaque tâche d'exemple.
  • Les permissions et les paramètres de la plateforme portent aussi leurs libellés et leurs descriptions dans les deux langues.
  • Le Language de l'espace de travail dans Settings est la langue de ses e-mails pour quiconque n'a choisi aucune langue. La langue des écrans est toujours celle de l'adresse.
  • L'assistant IA répond dans la langue de la page depuis laquelle on l'interroge, sauf si la personne écrit dans une autre.

Ce que l'API traduit

  • Les messages d'erreur reviennent dans la langue de l'en-tête Accept-Language, de même que le message d'une connexion, d'une modification de profil, de personnel, de rôle ou de paramètre réussie ; les autres réponses portent un code fixe (comme checkout_started) que le frontend formule lui-même. ar-SA compte comme de l'arabe ; toute langue que l'API n'a pas retombe sur l'anglais.
  • Ses propres textes sont des fichiers JSON dans back-end/src/i18n/translations/en/ et ar/, un par domaine : admin, auth, common, mail, project, roles, settings, tasks, users.
  • Les projets et les tâches reviennent avec les deux langues, sous la forme { "en": {…}, "ar": {…} }, et le tableau de bord en choisit une.
  • Les e-mails concernant un espace de travail (invitations, résumé hebdomadaire et e-mails de facturation) sont écrits à partir de mail.json dans la langue du destinataire : son propre choix, sinon le Language de l'espace de travail, sinon l'anglais (back-end/src/modules/mail/recipient-locale.ts). L'e-mail de réinitialisation du mot de passe (back-end/src/modules/auth/account.service.ts) et le reçu de licence (back-end/src/modules/licenses/services/license-checkout.service.ts) sont écrits en anglais, avec des liens dans la langue du lecteur ; traduisez-les à cet endroit si vos clients ont besoin de versions arabes.

Ajouter une langue au site

Les deux langues sont écrites dans quelques fichiers : en ajouter une troisième touche chacun d'eux. Les chemins sont à l'intérieur de website/.

  1. Ajoutez le code à locales dans src/i18n/routing.ts. Cette liste décide quelles adresses existent, ce que liste le sitemap et vers quelle langue va un chemin sans langue.
  2. Copiez chaque messages/<namespace>/en.json dans un fichier nommé d'après le nouveau code et traduisez les valeurs. src/i18n/request.ts charge un fichier par namespace pour chaque langue : aucun ne doit manquer.
  3. Faites de même pour src/content/docs/, src/content/journal/ et src/content/changelog/, et ajoutez le nouveau fichier à la table byLocale de l'index.ts de chaque dossier.
  4. Si la langue s'écrit de droite à gauche, étendez la ligne dir de src/app/[locale]/layout.tsx, qui ne connaît que ar, et donnez-lui une police dans src/styles/fonts.css.
  5. Le paiement envoie en ou ar à l'API (src/features/checkout/hooks/useCheckoutForm.ts), et l'API n'accepte que ces deux valeurs. Cherchez "ar" dans src/ et traitez-y aussi le nouveau code.

Ajouter une langue au tableau de bord

  1. Ajoutez le code à locales dans src/config/i18n.ts et dans src/proxy.ts et, s'il s'écrit de droite à gauche, à RTL_LOCALES dans src/app/layout.tsx et à la vérification dans src/hooks/locale/useDirection.ts.
  2. Copiez chaque messages/**/en.json dans un fichier nommé d'après le nouveau code, et traduisez les valeurs.
  3. Cherchez "ar" dans src/ : les dates, les graphiques, les widgets de l'assistant et quelques paramètres choisissent directement entre les deux langues, et pickLocale dans src/lib/api/shared.ts choisit un texte stocké en anglais ou en arabe.
  4. Les formulaires de projet et de tâche demandent l'anglais et l'arabe. Une troisième langue dans les textes stockés demande aussi que l'API l'accepte.

Ajouter une langue à l'API

L'API connaît en et ar dans supportedLocales de back-end/src/i18n/i18n.service.ts. Ajoutez-y le nouveau code, copiez src/i18n/translations/en/ dans un dossier portant son nom, et traduisez les fichiers. Les textes stockés sont une paire { en, ar }, validée par les classes de traductions de src/modules/projects/dto/project.dto.ts et src/modules/tasks/dto/task.dto.ts : une troisième langue dans les données est donc une modification de ces classes, des entités, des outils de l'assistant IA et du seed. Le paiement des licences accepte en ou ar dans src/modules/licenses/dto/start-license-checkout.dto.ts.

Bloqué sur une étape ?

Trouvez une solution avant de tout recommencer.

Dépannage

Préférences des Cookies

Nous utilisons des cookies pour améliorer votre expérience de navigation, analyser le trafic du site et personnaliser le contenu. En cliquant sur "Accepter Tout", vous consentez à notre utilisation des cookies pour l'analyse et la publicité personnalisée.