React + LinguiJS: Der ultimative Internationalisierungs-Guide [2026]

Warum LinguiJS in 2026 wählen?

Während react-i18next und react-intl beliebt sind, hat LinguiJS dank seines Fokus auf Performance und Entwicklererfahrung viel Boden gutgemacht.

• Leichtgewichtig: Nachrichten werden kompiliert, was die Bundle-Größe reduziert.
• Makros: Saubere Syntax mit JS-Makros (keine manuellen Key-IDs nötig).
• Extraktion: Leistungsstarkes CLI zum Extrahieren von Nachrichten aus dem Quellcode.

Installation

TerminalCopy
npm install --save-dev @lingui/cli @lingui/macro
npm install @lingui/react

Konfiguration

Erstelle eine lingui.config.js im Stammverzeichnis:

JavaScriptCopy
1module.exports = {
2  locales: ["en", "de", "fr"],
3  sourceLocale: "en",
4  catalogs: [{
5    path: "src/locales/{locale}/messages",
6    include: ["src"]
7  }],
8  format: "po"
9}

Verwendung in Komponenten

Die "Magie" von Lingui kommt von seinen Makros. Du schreibst den englischen Text direkt in deinen Code.

JSXCopy
1import { Trans } from '@lingui/macro';
2
3export default function Welcome() {
4  return (
5    <h1>
6      <Trans>Welcome to my App!</Trans>
7    </h1>
8  );
9}

Keine Notwendigkeit, Schlüssel wie homepage.welcome_title zu erfinden. Der Quelltext ist der Schlüssel (standardmäßig oder gehasht je nach Konfiguration).

Umgang mit Pluralen

Lingui handhabt komplexe Plurale brillant.

JSXCopy
1import { Plural } from '@lingui/macro';
2
3<p>
4  <Plural
5    value={count}
6    one="# message"
7    other="# messages"
8  />
9</p>

Workflow mit IntlPull

Lingui verwendet oft .po (Portable Object) Dateien, ein sehr mächtiges Standardformat.

1. Extraktion: npx lingui extract scannt deinen Code und aktualisiert die .po Dateien.
2. Übersetzung: Sende diese Dateien an IntlPull für KI- oder menschliche Übersetzung.
3. Kompilierung: npx lingui compile verwandelt die .po in optimierte JS-Dateien für Prod.

TerminalCopy
# Beispiel für Automatisierung
npm run extract
npx @intlpullhq/cli push src/locales/en/messages.po

Fazit

Wenn du nach einer modernen, typisierten und performanten Alternative zu klassischen i18n-Bibliotheken für React suchst, ist LinguiJS eine ausgezeichnete Wahl im Jahr 2026. Seine Makro-basierte Syntax macht den Code lesbarer und wartbarer.