Übersetzen Sie Ihre Nest-Backend-Website mit Intlayer | Internationalisierung (i18n)

express-intlayer ist eine leistungsstarke Internationalisierungs-Middleware (i18n) für Express-Anwendungen, die Ihre Backend-Services global zugänglich macht, indem sie lokalisierte Antworten basierend auf den Vorlieben des Clients bereitstellt. Da NestJS auf Express aufgebaut ist, können Sie express-intlayer nahtlos in Ihre NestJS-Anwendungen integrieren, um mehrsprachige Inhalte effektiv zu verwalten.

Praktische Use Cases

• Backend-Fehler in der Sprache des Benutzers anzeigen: Wenn ein Fehler auftritt, verbessert die Anzeige von Meldungen 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.

• Mehrsprachige Inhalte abrufen: Für Anwendungen, die Inhalte aus einer Datenbank abrufen, stellt Internationalisierung sicher, dass Sie diesen Inhalt 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.

• Mehrsprachige E-Mails versenden: Ob es sich um Transaktions-E-Mails, Marketingkampagnen oder Benachrichtigungen handelt, das Versenden von E-Mails in der Sprache des Empfängers kann die Engagement und Effektivität erheblich steigern.

• Mehrsprachige Push-Benachrichtigungen: Für mobile Anwendungen kann das Versenden von Push-Benachrichtigungen in einer bevorzugten Sprache des Benutzers die Interaktion und Bindung verbessern. Dieser persönliche Ansatz kann Benachrichtigungen relevanter und handlungsorientierter wirken lassen.

• Weitere Kommunikation: Jede Form der Kommunikation vom Backend, wie SMS-Nachrichten, Systemwarnungen oder Benutzeroberflächenupdates, profitiert davon, in der Sprache des Benutzers zu sein, um Klarheit zu gewährleisten und die Gesamtbenutzererfahrung zu verbessern.

Durch die Internationalisierung des Backends respektiert Ihre Anwendung nicht nur kulturelle Unterschiede, sondern entspricht auch besser den globalen Marktanforderungen, was einen wichtigen Schritt für die weltweite Skalierung Ihrer Services darstellt.

Erste Schritte

Erstellen eines neuen NestJS-Projekts

npm install -g @nestjs/clinest new my-nest-app

Installation

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

npx intlayer init --interactive

Das Flag --interactive ist optional. Verwenden Sie intlayer-cli init, wenn Sie ein KI-Agent sind.

Dieser Befehl erkennt Ihre Umgebung und installiert die erforderlichen Pakete. Zum Beispiel:

npm install intlayer express-intlayer

Konfigurieren von tsconfig.json

Um Intlayer mit TypeScript zu verwenden, stellen Sie sicher, dass Ihre tsconfig.json so eingerichtet ist, dass ES-Module unterstützt werden. Dies erreichen Sie, indem Sie die Optionen module und moduleResolution auf nodenext setzen.

{  compilerOptions: {    module: "nodenext",    moduleResolution: "nodenext",    // ... andere Optionen  },}

Einrichtung

Konfigurieren Sie die Internationalisierungseinstellungen, indem Sie eine intlayer.config.ts im Stammverzeichnis Ihres Projekts erstellen:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Deklarieren Sie Ihre Inhalte

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

Ihre Inhaltsdeklarationen können überall in Ihrer Anwendung definiert werden, solange sie im Verzeichnis contentDir enthalten sind (standardmäßig ./src). Und die Dateiendung der Inhaltsdeklaration entspricht (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Für weitere Details siehe die Inhaltsdeklarationsdokumentation.

Express Middleware Einrichtung

Integrieren Sie die Middleware express-intlayer in Ihre NestJS-Anwendung, um die Internationalisierung zu verwalten:

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";import { AppController } from "./app.controller";import { AppService } from "./app.service";import { intlayer } from "express-intlayer";@Module({  imports: [],  controllers: [AppController],  providers: [AppService],})export class AppModule implements NestModule {  configure(consumer: MiddlewareConsumer) {    consumer.apply(intlayer()).forRoutes("*"); // Auf alle Routen anwenden  }}

Verwenden Sie Übersetzungen in Ihren Services oder Controllern

Sie können nun die Funktion getIntlayer verwenden, um in Ihren Services oder Controllern auf Übersetzungen zuzugreifen:

import { Injectable } from "@nestjs/common";import { getIntlayer } from "express-intlayer";@Injectable()export class AppService {  getHello(): string {    return getIntlayer("app").greet;  }}

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 bestimmen.

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", // Einschluss der automatisch generierten Typen  ],}

VS Code Erweiterung

Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle Intlayer VS Code Erweiterung 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 Verwendung der Erweiterung lesen Sie die Intlayer VS Code Erweiterungsdokumentation.

Git-Konfiguration

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

Um dies zu tun, können Sie die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzufügen:

# Ignoriere die von Intlayer generierten Dateien.intlayer