Aller au contenu

Internationalisation

Ajoutez la prise en charge multilingue à votre app. Utilisez la Proyecta Content API pour la localisation éditoriale, ou demandez à l’IA de configurer un framework i18n directement dans le code.

Proyecta prend en charge deux approches complémentaires pour internationaliser les apps que tu crées :

  1. Localisation de contenu via la Proyecta Content API — pour le contenu éditorial (articles de blog, FAQ, textes marketing) qui doit être traduit en plusieurs langues
  2. i18n au niveau du code via un framework de traduction — pour les chaînes d’interface, les dates, les devises et le changement de locale à l’exécution

Ces deux approches fonctionnent dès aujourd’hui. Celle dont tu as besoin dépend de ce que tu traduis.

Proyecta lui-même est disponible en 24 locales, ce qui en fait un produit parfaitement au fait de l’i18n. Les mêmes schémas s’appliquent aux apps que tu crées avec lui.

Option 1 : Localisation de contenu (Proyecta Content API)

Section intitulée « Option 1 : Localisation de contenu (Proyecta Content API) »

Si tu crées un site riche en contenu — blog, base de connaissances, pages marketing, catalogue produit — utilise la prise en charge native des locales de la Content API.

// Create the locales you support
await proyecta.content.locales.create({
/* code: 'en', name: 'English' */
});
await proyecta.content.locales.create({
/* code: 'es', name: 'Español' */
});
await proyecta.content.locales.create({
/* code: 'fr', name: 'Français' */
});
// Then create entries that exist in multiple locales — fetch the right
// translation per request based on the user's locale.

C’est la bonne solution quand :

  • Des éditeurs non-développeurs ont besoin de traduire du contenu
  • Tu veux que les traductions soient versionnables
  • Tu as besoin d’une publication par locale (la publication programmée arrive bientôt — les entrées nécessitent actuellement une publication manuelle via l’API)

Consulte Gestion de contenu pour la documentation complète de la Content API.

Pour les chaînes d’interface — labels, boutons, messages d’erreur, dates, devises — demande à l’IA de configurer un framework i18n directement dans ton projet :

Add internationalization to my app.
Support English, Spanish, French, and Arabic.
Add message catalogs in src/locales/.
Add a language switcher in the header.
Use locale-prefixed URLs like /en/about and /es/about.
Make sure RTL layout works correctly for Arabic.

L’IA va :

  1. Choisir un framework — l’IA utilise i18next avec react-i18next (le standard de Proyecta)
  2. Créer les fichiers de catalogue dans src/locales/ (un JSON par langue)
  3. Envelopper les textes dans des appels t() (depuis le hook useTranslation de react-i18next)
  4. Ajouter un composant sélecteur de langue
  5. Configurer le routing d’URL avec des préfixes de locale
  6. Gérer les layouts RTL (dir="rtl") pour l’arabe, l’hébreu, etc.
  7. Formater les nombres, dates et devises selon la locale

Une fois ta langue de base en place, l’IA excelle à générer les autres fichiers de catalogue :

  • "Translate every string in src/locales/en.json into Spanish, French, German, and Japanese. Use natural, idiomatic phrasing — don't translate brand names."
  • "My app is fully built in English. Add Spanish translations for everything and an es/ route prefix."

Pour les contenus à fort enjeu (textes juridiques, médicaux, financiers), fais relire le résultat par un traducteur humain avant de déployer.

La plupart des apps réelles utilisent les deux : l’i18n au niveau du code pour l’interface (boutons, erreurs, navigation), et la Content API pour le contenu éditorial (articles, descriptions produit). Elles coexistent sans friction — ton framework i18n gère les fichiers de catalogue au moment du build, la Content API sert les entrées localisées à l’exécution.

  1. Choisis ta langue de base et finalise les textes en premier. Traduire une cible mouvante est douloureux.
  2. Regroupe les traductions en lots. Ne traduis pas au fil de l’eau — attends qu’une fonctionnalité soit stable.
  3. Teste le RTL tôt si tu prends en charge l’arabe ou l’hébreu. Les bugs RTL ne se voient pas tant qu’on ne regarde pas vraiment.
  4. Inclus lang et dir sur <html>. Les navigateurs et les lecteurs d’écran en dépendent.
  5. Utilise Intl pour le formatage. Ne réinvente pas le formatage des dates ou des devises — utilise Intl.DateTimeFormat, Intl.NumberFormat.
  • Interface de gestion des locales dans le builder — choisis les locales, visualise la couverture des traductions, modifie les catalogues sans quitter Proyecta
  • Traduction automatique à la sauvegarde pour les nouvelles chaînes
  • Templates de projet prêts pour l’i18n avec le framework préconfiguré