---
title: "i18n Internationalisierung"
description: "NocoBase Plugin-Internationalisierung: Aufbau des locale-Verzeichnisses, Schreibweise von Übersetzungsdateien, Verwendung von this.t / useT / tExpr in verschiedenen Szenarien."
keywords: "i18n,Internationalisierung,locale,Übersetzung,this.t,useT,tExpr,NocoBase"
---

# i18n Internationalisierung

NocoBase-Plugins verwalten Mehrsprachen-Dateien über das Verzeichnis `src/locale/`. Sind die Übersetzungsdateien geschrieben, lassen sich die übersetzten Texte in der Plugin-Klasse über `this.t()`, in Components über den `useT()`-Hook und in FlowModel-Definitionen über `tExpr()` abrufen.

## Übersetzungsdateien

Erstellen Sie unter `src/locale/` des Plugins JSON-Dateien je Sprache. Der Schlüssel ist der englische Originaltext, der Wert die Übersetzung in die jeweilige Sprache:

```bash
my-plugin/
└── src/
    └── locale/
        ├── zh-CN.json
        └── en-US.json
```

```json
// src/locale/zh-CN.json
{
  "Hello": "你好",
  "Save": "保存",
  "Your name is {{name}}": "你的名字是 {{name}}",
  "{{count}} February items": "{{count}} 条记录"
}
```

```json
// src/locale/en-US.json
{
  "Hello": "Hello",
  "Save": "Save",
  "Your name is {{name}}": "Your name is {{name}}",
  "{{count}} February items": "{{count}} items"
}
```

Einige Hinweise:

- **Der Schlüssel ist der englische Originaltext**, sodass bei fehlender Übersetzung auf Englisch zurückgefallen werden kann
- **Variablen verwenden doppelte geschweifte Klammern** `{{name}}`, konsistent mit der Syntax von [i18next](https://www.i18next.com/translation-function/interpolation)
- **Beim erstmaligen Hinzufügen einer Sprachdatei muss die Anwendung neu gestartet werden**, damit sie wirksam wird; spätere Änderungen werden per Hot-Reload übernommen
- NocoBase verwendet automatisch den **Paketnamen** des Plugins als Übersetzungs-Namespace, sodass Übersetzungen verschiedener Plugins nicht kollidieren

## Verwendung in einem Plugin: this.t()

In einer Plugin-Klasse fügt `this.t()` **automatisch den aktuellen Plugin-Paketnamen als Namespace ein**, sodass Sie `ns` nicht manuell übergeben müssen:

```ts
// src/client-v2/plugin.tsx
import { Plugin, Application } from '@nocobase/client-v2';

export class MyPlugin extends Plugin<any, Application> {
  async load() {
    // Verwendet automatisch den aktuellen Plugin-Paketnamen als ns
    console.log(this.t('Hello')); // -> "你好"

    // Beim Registrieren der Einstellungsseite den Titel mit this.t() übersetzen
    this.pluginSettingsManager.addMenuItem({
      key: 'my-settings',
      title: this.t('My Settings'),
      icon: 'SettingOutlined',
    });
    this.pluginSettingsManager.addPageTabItem({
      menuKey: 'my-settings',
      key: 'index',
      title: this.t('My Settings'),
      componentLoader: () => import('./pages/MySettingsPage'),
    });
  }
}
```

## Verwendung in Components: useT()

In React Components können Sie `this.t()` nicht direkt verwenden. Das Plugin-Gerüst generiert automatisch eine Datei `locale.ts`, die einen `useT()`-Hook bereitstellt:

```ts
// src/client-v2/locale.ts (vom Gerüst automatisch generiert)
import { tExpr as _tExpr, useFlowEngine } from '@nocobase/flow-engine';
// @ts-ignore
import pkg from './../../package.json';

export function useT() {
  const engine = useFlowEngine();
  return (str: string) => engine.context.t(str, { ns: [pkg.name, 'client'] });
}

export function tExpr(key: string) {
  return _tExpr(key, { ns: [pkg.name, 'client'] });
}
```

In Components verwenden Sie es so:

```tsx
// src/client-v2/pages/MySettingsPage.tsx
import React from 'react';
import { Button } from 'antd';
import { useT } from '../locale';

export default function MySettingsPage() {
  const t = useT();

  return (
    <div>
      <h2>{t('Hello')}</h2>
      <p>{t('Your name is {{name}}', { name: 'NocoBase' })}</p>
      <Button>{t('Save')}</Button>
    </div>
  );
}
```

Die von `useT()` zurückgegebene Funktion `t` ist bereits an den Namespace des Plugins gebunden — Sie übergeben einfach den Schlüssel.

## Verwendung in FlowModel: tExpr()

`FlowModel.define()` und `registerFlow()` werden beim Laden des Moduls ausgeführt, zu diesem Zeitpunkt ist i18n noch nicht initialisiert und `t()` kann nicht direkt aufgerufen werden. Verwenden Sie in diesem Fall `tExpr()` — es erzeugt einen verzögerten Übersetzungsausdruck als Zeichenkette, der zur Laufzeit ausgewertet wird:

```tsx
// src/client-v2/models/MyBlockModel.tsx
import { BlockModel } from '@nocobase/client-v2';
import { tExpr } from '../locale';

export class MyBlockModel extends BlockModel {
  renderComponent() {
    return <div>My custom block</div>;
  }
}

// tExpr generiert eine Zeichenkette wie '{{t("My block")}}', die zur Laufzeit übersetzt wird
MyBlockModel.define({
  label: tExpr('My block'),
});

MyBlockModel.registerFlow({
  key: 'flow1',
  title: tExpr('My Block Settings'),
  on: 'beforeRender',
  steps: {
    editTitle: {
      title: tExpr('Edit Title'),
      uiSchema: {
        title: {
          type: 'string',
          title: tExpr('Title'),
          'x-decorator': 'FormItem',
          'x-component': 'Input',
        },
      },
      handler(ctx, params) {
        ctx.model.props.title = params.title;
      },
    },
  },
});
```

Kurz gesagt: `this.t()` und `useT()` werden für die Übersetzung zur Laufzeit verwendet, `tExpr()` für die verzögerte Übersetzung in statischen Definitionen.

:::tip Tipp

`tExpr` hat zwei Quellen: die vom Plugin automatisch generierte `locale.ts` und `@nocobase/flow-engine`. Der Unterschied: Das `tExpr` aus `locale.ts` ist bereits an den Plugin-Paketnamen als Namespace gebunden, während das direkt aus `@nocobase/flow-engine` importierte `tExpr` keine Namespace-Bindung hat. **Verwenden Sie im Plugin-Code immer das aus `locale.ts` exportierte `tExpr`**, damit die Übersetzung korrekt zu den Sprachdateien des eigenen Plugins zugeordnet wird.

:::

## Schnellübersicht der drei Verwendungsarten

| Szenario | Verwendung | Quelle |
| --- | --- | --- |
| In Plugin `load()` | `this.t('key')` | In der Plugin-Basisklasse enthalten |
| In React Components | `const t = useT(); t('key')` | `locale.ts` |
| Statische FlowModel-Definition | `tExpr('key')` | `locale.ts` |

## Verwandte Links

- [Context → Häufige Fähigkeiten → Internationalisierung](../ctx/common-capabilities#internationalisierung-ctxt--ctxi18n) — Vollständige API-Referenz zu ctx.t, ctx.i18n
- [Sprachenliste](../../languages) — Vollständige Liste der von NocoBase unterstützten Sprachcodes
- [Component-Entwicklung](./index.md) — Verwendung von useFlowContext in Components
- [FlowEngine-Übersicht](../flow-engine/index.md) — Verwendung von tExpr in FlowModel
