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.
| Application | Anglais | Arabe |
|---|---|---|
| Site | /en/… | /ar/… |
| Tableau de bord | /en/… | /ar/… |
| API | Accept-Language: en | Accept-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
/ensinon. 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 dansAccept-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.
| Application | Namespaces |
|---|---|
| Site | layout, 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 bord | ai-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.jsonapparaî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 lemessaged'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 (commecheckout_started) que le frontend formule lui-même.ar-SAcompte 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/etar/, 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.jsondans 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/.
- Ajoutez le code à
localesdanssrc/i18n/routing.ts. Cette liste décide quelles adresses existent, ce que liste le sitemap et vers quelle langue va un chemin sans langue. - Copiez chaque
messages/<namespace>/en.jsondans un fichier nommé d'après le nouveau code et traduisez les valeurs.src/i18n/request.tscharge un fichier par namespace pour chaque langue : aucun ne doit manquer. - Faites de même pour
src/content/docs/,src/content/journal/etsrc/content/changelog/, et ajoutez le nouveau fichier à la tablebyLocalede l'index.tsde chaque dossier. - Si la langue s'écrit de droite à gauche, étendez la ligne
dirdesrc/app/[locale]/layout.tsx, qui ne connaît quear, et donnez-lui une police danssrc/styles/fonts.css. - Le paiement envoie
enouarà l'API (src/features/checkout/hooks/useCheckoutForm.ts), et l'API n'accepte que ces deux valeurs. Cherchez"ar"danssrc/et traitez-y aussi le nouveau code.
Ajouter une langue au tableau de bord
- Ajoutez le code à
localesdanssrc/config/i18n.tset danssrc/proxy.tset, s'il s'écrit de droite à gauche, àRTL_LOCALESdanssrc/app/layout.tsxet à la vérification danssrc/hooks/locale/useDirection.ts. - Copiez chaque
messages/**/en.jsondans un fichier nommé d'après le nouveau code, et traduisez les valeurs. - Cherchez
"ar"danssrc/: les dates, les graphiques, les widgets de l'assistant et quelques paramètres choisissent directement entre les deux langues, etpickLocaledanssrc/lib/api/shared.tschoisit un texte stocké en anglais ou en arabe. - 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.