Übersetzungen hinzufügen

Diese Anleitung beschreibt Hinzufügen oder Aktualisieren übersetzter Strings in Motoko Base. Lies zuerst Internationalisierung, wenn du Routing und Locale-Auflösung brauchst.

Kurz-Checkliste

Beim Hinzufügen von UI-Text zu einem Feature:

1. JSON-Namespace unter messages/en/ anlegen oder erweitern
2. In messages/en/index.ts exportieren
3. Gleiche Keys in messages/es/, messages/de/, messages/fr/ und messages/pt-BR/ spiegeln
4. Hardcodierte Strings durch useTranslations() oder getTranslations() ersetzen
5. formatDate() / formatNumber() aus @/lib/i18n/format für locale-aware Formatierung nutzen

1. Englische Messages definieren

Namespace-Datei für dein Feature — flache oder verschachtelte Keys, konsistente Benennung:

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

Namespace in der Locale-Index-Datei registrieren:

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

const messages = {
  // …bestehende Namespaces
  myFeature,
};

export default messages;

camelCase für den Export-Key (myFeature) — das wird der Namespace für useTranslations("myFeature").

2. Keys in jeder Locale spiegeln

Jeder Locale-Ordner braucht dieselbe Key-Struktur. Fehlende Keys führen zur Laufzeit zu Fehlern.

Wiederhole für messages/es/index.ts, messages/de/index.ts, messages/fr/index.ts und messages/pt-BR/index.ts.

Tipp: Zuerst englische JSON in andere Locales kopieren, dann übersetzen.

3. Übersetzungen in Client-Komponenten

"use client";

import { useTranslations } from "next-intl";
import { PageHeader } from "@/components/layout/page-header";

export function MyFeaturePage() {
  const t = useTranslations("myFeature");

  return (
    <div className="p-6 md:p-8">
      <PageHeader
        title={t("page.title")}
        description={t("page.description")}
      />
      <p>{t("empty")}</p>
    </div>
  );
}

Interpolation

{
  "welcome": {
    "title": "Welcome back, {name}"
  }
}

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

4. Übersetzungen auf dem Server

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

export async function generateMetadata() {
  const t = await getTranslations("myFeature");
  return {
    title: t("page.title"),
    description: t("page.description"),
  };
}

Dashboard-Routen lösen Locale via AppIntlProvider in src/app/dashboard/layout.tsx — kein [locale]-Segment nötig.

5. Datum und Zahlen formatieren

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

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

Auf dem Server: getLocale() aus next-intl/server.

6. Dashboard-Navigation übersetzen

Nav-Labels kommen aus messages/{locale}/dashboard.json, gemerged in src/features/dashboard/components/sidebar/sidebar.tsx.

7. Marketing-Content übersetzen

Kein übersetzbares Marketing-Copy in src/features/marketing/config.ts. Stattdessen:

1. Struktur in src/features/marketing/marketing-structure.ts
2. Display-Strings in messages/{locale}/marketing.json

8. Dokumentationsseiten übersetzen

content/docs/my-section/my-page.mdx       # Englisch
content/docs/my-section/my-page.de.mdx    # Deutsch
content/docs/my-section/my-page.es.mdx    # Spanisch
content/docs/my-section/my-page.fr.mdx    # Französisch
content/docs/my-section/my-page.pt-BR.mdx # Brasilianisches Portugiesisch

Docs-Chrome (Previous, Next, Copy MD) liegt in messages/{locale}/docs.json.

Häufige Fehler

Referenz-Implementierungen

Nächste Schritte

Internationalisierung — Routing, Locale-Auflösung und SEO.

Projektstruktur — Feature-Ordner-Layout.