Añadir traducciones

Esta guía explica cómo añadir o actualizar strings traducidos en Motoko Base. Lee Internacionalización primero si necesitas el panorama de routing y resolución de locale.

Checklist rápido

Al añadir copy de UI a una feature:

1. Crea o extiende un namespace JSON bajo messages/en/
2. Expórtalo desde messages/en/index.ts
3. Replica las mismas keys en messages/es/, messages/de/, messages/fr/ y messages/pt-BR/
4. Reemplaza strings hardcodeados con useTranslations() o getTranslations()
5. Usa formatDate() / formatNumber() de @/lib/i18n/format

1. Definir mensajes en inglés

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

Registra el namespace en el índice del locale:

// messages/en/index.ts
import myFeature from "./my-feature.json";

const messages = { /* … */ myFeature };
export default messages;

Usa camelCase para la clave de export (myFeature) — será el namespace de useTranslations("myFeature").

2. Replicar keys en cada locale

Cada carpeta de locale debe exponer la misma estructura de keys. Keys faltantes causan errores en runtime.

3. Usar traducciones en componente cliente

"use client";

import { useTranslations } from "next-intl";

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

Interpolación

t("welcome.title", { name: firstName })

4. Traducciones en el servidor

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

export default async function Page() {
  const t = await getTranslations("myFeature");
  return <h1>{t("page.title")}</h1>;
}

Las rutas del dashboard resuelven locale vía AppIntlProvider — no necesitas segmento [locale] en la URL.

5. Formatear fechas y números

import { useLocale } from "next-intl";
import { formatDate } from "@/lib/i18n/format";

formatDate(new Date(), useLocale(), { dateStyle: "medium" });

6. Traducir navegación del dashboard

Labels en messages/{locale}/dashboard.json, usados en src/features/dashboard/components/sidebar/sidebar.tsx.

7. Traducir marketing

No pongas copy traducible en config.ts. Usa marketing-structure.ts + messages/{locale}/marketing.json.

8. Traducir páginas de docs

content/docs/my-section/my-page.mdx       # Inglés
content/docs/my-section/my-page.es.mdx    # Español
…

Chrome de docs (Previous, Next) en messages/{locale}/docs.json.

Errores comunes

Implementaciones de referencia

Próximos pasos

Internacionalización — Routing, resolución de locale y SEO.

Estructura del proyecto — Layout de carpetas de features.