Erste Schritte mit der Internationalisierung (i18n) mit Intlayer und Express

express-intlayer ist eine leistungsstarke Internationalisierungs-Middleware (i18n) für Express-Anwendungen, die entwickelt wurde, um Ihre Backend-Dienste global zugänglich zu machen, indem sie lokalisierte Antworten basierend auf den Präferenzen des Clients bereitstellt.

Warum Ihr Backend internationalisieren?

Die Internationalisierung Ihres Backends ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Benutzers bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.

Praktische Anwendungsfälle

• Anzeige von Backend-Fehlern in der Sprache des Benutzers: Wenn ein Fehler auftritt, verbessert die Anzeige von Nachrichten in der Muttersprache des Benutzers das Verständnis und reduziert Frustration. Dies ist besonders nützlich für dynamische Fehlermeldungen, die in Frontend-Komponenten wie Toasts oder Modals angezeigt werden könnten.

• Abrufen von mehrsprachigen Inhalten: Für Anwendungen, die Inhalte aus einer Datenbank abrufen, stellt die Internationalisierung sicher, dass Sie diese Inhalte in mehreren Sprachen bereitstellen können. Dies ist entscheidend für Plattformen wie E-Commerce-Websites oder Content-Management-Systeme, die Produktbeschreibungen, Artikel und andere Inhalte in der vom Benutzer bevorzugten Sprache anzeigen müssen.

• Versand von mehrsprachigen E-Mails: Ob Transaktions-E-Mails, Marketingkampagnen oder Benachrichtigungen – der Versand von E-Mails in der Sprache des Empfängers kann die Interaktion und Effektivität erheblich steigern.

• Mehrsprachige Push-Benachrichtigungen: Für mobile Anwendungen kann das Senden von Push-Benachrichtigungen in der bevorzugten Sprache eines Benutzers die Interaktion und Bindung verbessern. Diese persönliche Note kann Benachrichtigungen relevanter und handlungsorientierter machen.

• Andere Kommunikationsformen: Jede Form der Kommunikation vom Backend, wie SMS-Nachrichten, Systemwarnungen oder Benutzeroberflächen-Updates, profitiert davon, in der Sprache des Benutzers zu sein, was Klarheit gewährleistet und die allgemeine Benutzererfahrung verbessert.

Durch die Internationalisierung des Backends respektiert Ihre Anwendung nicht nur kulturelle Unterschiede, sondern passt sich auch besser an die Bedürfnisse des globalen Marktes an, was sie zu einem entscheidenden Schritt bei der Skalierung Ihrer Dienste weltweit macht.

Erste Schritte

Installation

Um express-intlayer zu verwenden, installieren Sie das Paket mit npm:

npm install intlayer express-intlayer

Einrichtung

Konfigurieren Sie die Internationalisierungseinstellungen, indem Sie eine intlayer.config.ts in Ihrem Projektstammverzeichnis erstellen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH_MEXICO,      Locales.SPANISH_SPAIN,    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

Deklarieren Sie Ihre Inhalte

Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:

import { t, type Dictionary } from "intlayer";const indexContent = {  key: "index",  content: {    exampleOfContent: t({      en: "Example of returned content in English",      fr: "Exemple de contenu renvoyé en français",      "es-ES": "Ejemplo de contenido devuelto en español (España)",      "es-MX": "Ejemplo de contenido devuelto en español (México)",    }),  },} satisfies Dictionary;export default indexContent;

Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie in das contentDir-Verzeichnis (standardmäßig ./src) aufgenommen werden. Und sie müssen der Dateiendung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

Für weitere Details siehe die Dokumentation zur Inhaltsdeklaration.

Express-Anwendungs-Setup

Richten Sie Ihre Express-Anwendung so ein, dass express-intlayer verwendet wird:

import express, { type Express } from "express";import { intlayer, t, getDictionary, getIntlayer } from "express-intlayer";import dictionaryExample from "./index.content";const app: Express = express();// Lade den Internationalisierungs-Request-Handlerapp.use(intlayer());// Routenapp.get("/t_example", (_req, res) => {  res.send(    t({      de: "Beispiel für zurückgegebenen Inhalt auf Deutsch",      en: "Example of returned content in English",      fr: "Exemple de contenu renvoyé en français",      "es-ES": "Ejemplo de contenido devuelto en español (España)",      "es-MX": "Ejemplo de contenido devuelto en español (México)",    })  );});app.get("/getIntlayer_example", (_req, res) => {  res.send(getIntlayer("index").exampleOfContent);});app.get("/getDictionary_example", (_req, res) => {  res.send(getDictionary(dictionaryExample).exampleOfContent);});// Server startenapp.listen(3000, () => console.log(`Listening on port 3000`));

Kompatibilität

express-intlayer ist vollständig kompatibel mit:

• react-intlayer für React-Anwendungen
• next-intlayer für Next.js-Anwendungen
• vite-intlayer für Vite-Anwendungen

Es funktioniert auch nahtlos mit jeder Internationalisierungslösung in verschiedenen Umgebungen, einschließlich Browsern und API-Anfragen. Sie können die Middleware anpassen, um die Locale über Header oder Cookies zu erkennen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... Andere Konfigurationsoptionen  middleware: {    headerName: "my-locale-header",    cookieName: "my-locale-cookie",  },};export default config;

Standardmäßig interpretiert express-intlayer den Accept-Language-Header, um die bevorzugte Sprache des Clients zu ermitteln.

Für weitere Informationen zur Konfiguration und zu fortgeschrittenen Themen besuchen Sie unsere Dokumentation.

TypeScript konfigurieren

express-intlayer nutzt die leistungsstarken Funktionen von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, wodurch das Risiko fehlender Übersetzungen verringert und die Wartbarkeit verbessert wird.

Stellen Sie sicher, dass die automatisch generierten Typen (standardmäßig unter ./types/intlayer.d.ts) in Ihrer tsconfig.json-Datei enthalten sind.

{  // ... Ihre bestehenden TypeScript-Konfigurationen  "include": [    // ... Ihre bestehenden TypeScript-Konfigurationen    ".intlayer/**/*.ts", // Einschließen der automatisch generierten Typen  ],}

VS Code Extension

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Extension installieren.

Im VS Code Marketplace installieren

Diese Erweiterung bietet:

• Autovervollständigung für Übersetzungsschlüssel.
• Echtzeit-Fehlererkennung für fehlende Übersetzungen.
• Inline-Vorschauen des übersetzten Inhalts.
• Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

Für weitere Details zur Nutzung der Erweiterung lesen Sie die Intlayer VS Code Extension Dokumentation.

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. So vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.

VS Code Extension

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Extension installieren.

Im VS Code Marketplace installieren

Diese Erweiterung bietet:

• Autovervollständigung für Übersetzungsschlüssel.
• Echtzeit-Fehlererkennung für fehlende Übersetzungen.
• Inline-Vorschauen des übersetzten Inhalts.
• Schnellaktionen, um Übersetzungen einfach zu erstellen und zu aktualisieren.

Weitere Details zur Verwendung der Erweiterung finden Sie in der Intlayer VS Code Extension Dokumentation.

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. So vermeiden Sie, diese versehentlich in Ihr Git-Repository zu committen.

Dazu können Sie folgende Anweisungen in Ihre .gitignore-Datei einfügen:

# Ignoriere die von Intlayer generierten Dateien.intlayer

Dokumentationshistorie

• 5.5.10 - 2025-06-29: Initiale Historie