Documentation

Ajouter des traductions

Guide pas à pas pour traduire le copy UI dans les features Motoko Base avec les catalogues de messages next-intl.

Ouvrir dansChatGPT (s’ouvre dans un nouvel onglet)Claude (s’ouvre dans un nouvel onglet)Cursor (s’ouvre dans un nouvel onglet)Guide pas à pas pour traduire le copy UI dans les features Motoko Base avec les catalogues de messages next-intl.

Ce guide explique comment ajouter ou mettre à jour des chaînes traduites dans Motoko Base. Lisez Internationalisation d'abord pour le routage et la résolution de locale.

Checklist rapide

Lors de l'ajout de copy UI à une feature :

  1. Créez ou étendez un namespace JSON sous messages/en/
  2. Exportez-le depuis messages/en/index.ts
  3. Reproduisez les mêmes clés dans messages/es/, messages/de/, messages/fr/ et messages/pt-BR/
  4. Remplacez les chaînes en dur par useTranslations() ou getTranslations()
  5. Utilisez formatDate() / formatNumber() depuis @/lib/i18n/format

1. Définir les messages anglais

// messages/en/my-feature.json
{
  "page": {
    "title": "My Feature",
    "description": "Manage your items."
  },
  "empty": "No items yet."
}

Enregistrez le namespace dans l'index :

import myFeature from "./my-feature.json";
const messages = { /* … */ myFeature };
export default messages;

Utilisez camelCase pour la clé d'export — namespace de useTranslations("myFeature").

2. Reproduire les clés dans chaque locale

Chaque dossier de locale doit exposer la même structure de clés.

3. Client

"use client";
import { useTranslations } from "next-intl";

export function MyFeaturePage() {
  const t = useTranslations("myFeature");
  return <h1>{t("page.title")}</h1>;
}

4. Serveur

import { getTranslations } from "next-intl/server";

Les routes dashboard résolvent la locale via AppIntlProvider — pas de segment [locale] dans l'URL.

5. Formater dates et nombres

import { formatDate } from "@/lib/i18n/format";

6. Nav dashboard

Labels dans messages/{locale}/dashboard.json, utilisés dans src/features/dashboard/components/sidebar/sidebar.tsx.

7. Marketing

Structure dans marketing-structure.ts, copy dans messages/{locale}/marketing.json.

8. Pages docs

Fichiers MDX avec suffixe dot par locale. Chrome docs dans messages/{locale}/docs.json.

Erreurs courantes

ErreurCorrection
Anglais en dur dans JSXDéplacer vers namespace JSON
Clé manquante dans une localeAjouter dans les cinq fichiers
next/link sur marketingLink depuis @/i18n/navigation

Références

FeatureNamespaceComposant
Chat (dashboard)dashboardsrc/features/dashboard/components/chat/chat-page.tsx
Apparence (paramètres)settingssrc/features/dashboard/components/settings/appearance-settings-page.tsx
Authauthauth-section-3.tsx

Prochaines étapes

Internationalisation — Routage, locale et SEO.

Structure du projet — Layout des features.