Langues et textes

Configuration et paramètres

Avant toute étape, lisez Avant de commencer et Principes de base du terminal. Ces instructions supposent que vous avez ouvert le monorepo supastack complet dans VS Code ; sa racine package.json marque la racine du référentiel. Dans les commandes pnpm, un package d'espace de travail est une application ou un dossier de code partagé ; dans le produit, un espace de travail est le conteneur de données et la limite de sécurité d'une équipe. corepack pnpm --filter ... sélectionne un package dans le monorepo tandis que les commandes sont exécutées à partir de sa racine. Si vous avez ouvert uniquement un dossier mobile ou de bureau synchronisé, il ne contient pas le backend Web, la configuration Docker ou les scripts racine : exécutez le backend à partir de ce monorepo ou d'un serveur hébergé accessible et utilisez les propres scripts du dossier de plateforme. Une variable d'environnement est un paramètre nommé stocké dans un fichier .env local ou dans votre tableau de bord d'hébergement ; redémarrez l'application concernée après l'avoir modifiée et conservez les secrets du serveur en dehors des valeurs NEXT_PUBLIC_ et EXPO_PUBLIC_.

1. Ouvrez packages/i18n/src/index.ts dans VS Code pour voir les noms de langues pris en charge et les assistants de paramètres régionaux ; recherchez les fichiers de dictionnaire correspondants avant de modifier la copie du produit.

2. Ajoutez la même nouvelle clé et la même traduction aux dictionnaires anglais, allemand, espagnol et français.

3. À partir de la racine du référentiel, exécutez le corepack pnpm test -- packages/i18n/src/index.test.ts et démarrez Web avec le corepack pnpm --filter @supastack/web dev. Attendu : le sélecteur de langue modifie le texte visible tout en préservant le chemin de la page actuelle.

Les langues sont définies dans @supastack/i18n avec SUPPORTED_LOCALES, LOCALE_COOKIE, resolveLocale, getDictionary et localePath. Le proxy définit x-supastack-locale et gère les redirections canoniques vers l’anglais ; LanguageSwitcher met à jour le cookie et conserve les sous-routes actives. Les routes principales de l’application (/dashboard, /settings, /billing, /chat) fonctionnent directement avec les préfixes /[locale], comme la page d’accueil marketing /{locale}.

Les dictionnaires couvrent la navigation marketing, les libellés de sections des paramètres, le chrome des paramètres d’organisation, les e-mails transactionnels (invitation/OTP/lien magique/IA/facturation), les libellés de préférences de notification et le texte des événements de notification dans l’application.

import { getDictionary, resolveLocale, LOCALE_COOKIE } from "@supastack/i18n";

const locale = resolveLocale([
  cookieStore.get(LOCALE_COOKIE)?.value,
  headers.get("x-supastack-locale"),
  headers.get("accept-language"),
]);
const copy = getDictionary(locale);

Commandes à copier

Suivez les commentaires pour voir dans quel dossier une commande s'exécute. Si deux terminaux sont étiquetés, ouvrez deux fenêtres de terminal et laissez la première commande s'exécuter pendant que vous utilisez la seconde.

corepack pnpm test -- packages/i18n/src/index.test.ts
corepack pnpm --filter @supastack/web dev

Processus d’implémentation

Transmettez la langue aux pages serveur des paramètres et de l’organisation, ainsi qu’à notificationCopyForEvent et aux options d’envoi des e-mails d’authentification lorsqu’elle est disponible. Conservez l’anglais comme DEFAULT_LOCALE et n’inventez pas d’affirmations marketing en dehors des clés de dictionnaire.

Les e-mails transactionnels restent distincts de la prospection. Complétez les dictionnaires avant de placer toutes les routes marketing sous [locale].

Vérification et dépannage

Si l'anglais apparaît pour une phrase, vérifiez que la clé existe dans les quatre dictionnaires et que la page demande la même clé. Si le changement de langue revient à la page d'accueil, conservez le chemin actuel lors de la création du lien vers les paramètres régionaux. Conservez une copie des e-mails sur le chemin des e-mails transactionnels ; ne le réutilisez pas pour une diffusion massive.

Exécutez les tests Vitest de packages/i18n, les tests du proxy et ceux de locale-app-routes. Vérifiez ponctuellement LanguageSwitcher sur / et les titres localisés des paramètres, organisation, tableau de bord, facturation et chat lorsque le préfixe de langue est de/es/fr.