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

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

Praktische Anwendungsfälle

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

• Abrufen mehrsprachiger Inhalte: Für Anwendungen, die Inhalte aus einer Datenbank beziehen, 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.

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

• Mehrsprachige Push-Benachrichtigungen: Für mobile Anwendungen kann das Versenden von Push-Benachrichtigungen in der bevorzugten Sprache eines Benutzers die Interaktion und Kundenbindung verbessern. Diese persönliche Note kann dazu führen, dass sich Benachrichtigungen relevanter und handlungsorientierter anfühlen.

• Andere Kommunikationen: Jede Form der Kommunikation vom Backend, wie SMS-Nachrichten, Systemalarme oder Aktualisierungen der Benutzeroberfläche, profitiert davon, in der Sprache des Benutzers zu sein, was Klarheit gewährleistet und das allgemeine Benutzererlebnis 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 ein wichtiger Schritt zur weltweiten Skalierung Ihrer Dienste ist.

Erste Schritte

See Application Template on GitHub.

Installation

Um hono-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 hono-intlayer

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_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, sofern sie im Verzeichnis contentDir (standardmäßig ./src) enthalten sind und der Dateiendung für Inhaltsdeklarationen entsprechen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Weitere Einzelheiten finden Sie in der Dokumentation zur Inhaltsdeklaration.

Einrichtung der Hono-Anwendung

Richten Sie Ihre Hono-Anwendung für die Verwendung von hono-intlayer ein:

import { Hono } from "hono";
import { intlayer, t, getDictionary, getIntlayer } from "hono-intlayer";
import dictionaryExample from "./index.content";

const app = new Hono();

// Internationalisierungs-Request-Handler laden
app.use("*", intlayer());

// Routen
app.get("/t_example", (c) => {
  return c.text(
    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)",
    })
  );
});

app.get("/getIntlayer_example", (c) => {
  return c.json(getIntlayer("index").exampleOfContent);
});

app.get("/getDictionary_example", (c) => {
  return c.json(getDictionary(dictionaryExample).exampleOfContent);
});

export default app;

Kompatibilität

hono-intlayer ist voll 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 Sprache über Header oder Cookies zu erkennen:

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

const config: IntlayerConfig = {
  // ... Andere Konfigurationsoptionen
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

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

Weitere Informationen zur Konfiguration und zu fortgeschrittenen Themen finden Sie in unserer Dokumentation.

TypeScript konfigurieren

hono-intlayer nutzt die robusten 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", // Die automatisch generierten Typen einschließen
  ],
}

VS Code-Erweiterung

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

Installation über den VS Code Marketplace

Diese Erweiterung bietet:

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

Weitere Einzelheiten zur Verwendung der Erweiterung finden Sie in der Dokumentation zur Intlayer VS Code-Erweiterung.

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren. Dies ermöglicht es Ihnen, zu vermeiden, dass sie in Ihr Git-Repository übertragen werden.

Fügen Sie dazu die folgenden Anweisungen zu Ihrer .gitignore-Datei hinzu:

# Die von Intlayer generierten Dateien ignorieren
.intlayer

Häufig gestellte Fragen