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

fastify-intlayer ist ein leistungsfähiges Internationalisierungs-Plugin (i18n) für Fastify-Anwendungen, das entwickelt wurde, um Ihre Backend-Services global zugänglich zu machen, indem es lokalisierte Antworten basierend auf den Präferenzen des Clients bereitstellt.

Siehe Paketimplementierung auf GitHub: https://github.com/aymericzip/intlayer/tree/main/packages/fastify-intlayer

Praktische Anwendungsfälle

• Anzeige von Backend-Fehlern in der Sprache des Nutzers: Wenn ein Fehler auftritt, verbessert die Anzeige von Meldungen in der Muttersprache des Nutzers 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önnen.
• Abrufen mehrsprachiger Inhalte: Für Anwendungen, die Inhalte aus einer Datenbank abrufen, stellt 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 Nutzer 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 deutlich steigern.
• Mehrsprachige Push-Benachrichtigungen: Für mobile Anwendungen können Push-Benachrichtigungen in der bevorzugten Sprache des Nutzers die Interaktion und Bindung verbessern. Diese persönliche Note kann Benachrichtigungen relevanter erscheinen lassen und eher zu konkreten Aktionen anregen.
• Andere Kommunikation: Jede Form der Kommunikation vom Backend, wie SMS-Nachrichten, Systemwarnungen oder Benutzeroberflächen-Aktualisierungen, profitiert davon, in der Sprache des Nutzers verfügbar zu sein. Dies sorgt für Klarheit und verbessert das gesamte Benutzererlebnis.

Durch die Internationalisierung des Backends respektiert Ihre Anwendung nicht nur kulturelle Unterschiede, sondern passt sich auch besser den Anforderungen des globalen Marktes an und wird so zu einem wichtigen Schritt beim weltweiten Skalieren Ihrer Dienste.

Erste Schritte

Siehe Anwendungsvorlage auf GitHub.

Installation

Um fastify-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 fastify-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 Content-Deklarationen, 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 Content-Deklarationen können überall in Ihrer Anwendung definiert werden, solange sie im Verzeichnis contentDir (standardmäßig ./src) enthalten sind. Und die Dateiendung der Content-Deklaration muss übereinstimmen (standardmäßig .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Für weitere Details siehe die Dokumentation zur Content-Deklaration.

Fastify-Anwendung einrichten

Konfigurieren Sie Ihre Fastify-Anwendung, um fastify-intlayer zu verwenden:

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

const fastify = Fastify({ logger: true });

// Internationalisierungs-Plugin laden
await fastify.register(intlayer);

// Routen
fastify.get("/t_example", async (_req, reply) => {
  return 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)",
  });
});

fastify.get("/getIntlayer_example", async (_req, reply) => {
  return getIntlayer("index").exampleOfContent;
});

fastify.get("/getDictionary_example", async (_req, reply) => {
  return getDictionary(dictionaryExample).exampleOfContent;
});

// Server starten
const start = async () => {
  try {
    await fastify.listen({ port: 3000 });
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Kompatibilität

fastify-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 = {
  // ... Weitere Konfigurationsoptionen
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

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

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

TypeScript konfigurieren

fastify-intlayer nutzt die leistungsstarken Möglichkeiten von TypeScript, um den Internationalisierungsprozess zu verbessern. Die statische Typisierung von TypeScript stellt sicher, dass jeder Übersetzungsschlüssel berücksichtigt wird, reduziert das Risiko fehlender Übersetzungen und verbessert die Wartbarkeit.

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", // Automatisch generierte Typen einbeziehen
  ],
}

VS Code-Erweiterung

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

Installieren im VS Code Marketplace

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 Dokumentation der Intlayer VS Code-Erweiterung.

Git-Konfiguration

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

Dazu können Sie die folgenden Einträge in Ihre .gitignore-Datei aufnehmen:

# Ignoriere die von Intlayer generierten Dateien
.intlayer

Häufig gestellte Fragen