Next.js Internationalisierung (i18n) mit next-i18next und Intlayer

Sowohl next-i18next als auch Intlayer sind Open-Source-Internationalisierungs- (i18n) Frameworks, die für Next.js-Anwendungen entwickelt wurden. Sie werden häufig für die Verwaltung von Übersetzungen, Lokalisierung und Sprachwechsel in Softwareprojekten verwendet.

Beide Lösungen umfassen drei Hauptkonzepte:

1. Inhaltsdeklaration: Die Methode zur Definition des übersetzbaren Inhalts Ihrer Anwendung.

   • Im Falle von i18next als resource bezeichnet, ist die Inhaltsdeklaration ein strukturiertes JSON-Objekt, das Schlüssel-Wert-Paare für Übersetzungen in einer oder mehreren Sprachen enthält. Siehe i18next-Dokumentation für weitere Informationen.
   • Im Falle von Intlayer als content declaration file bezeichnet, kann die Inhaltsdeklaration eine JSON-, JS- oder TS-Datei sein, die die strukturierten Daten exportiert. Siehe Intlayer-Dokumentation für weitere Informationen.

2. Utilities: Werkzeuge zum Erstellen und Interpretieren von Inhaltsdeklarationen in der Anwendung, wie getI18n(), useCurrentLocale() oder useChangeLocale() für next-i18next und useIntlayer() oder useLocale() für Intlayer.

3. Plugins und Middlewares: Funktionen zur Verwaltung von URL-Weiterleitungen, Bündeloptimierung und mehr, wie next-i18next/middleware für next-i18next oder intlayerMiddleware für Intlayer.

Intlayer vs. i18next: Hauptunterschiede

Um die Unterschiede zwischen i18next und Intlayer zu erkunden, prüfen Sie unseren next-i18next vs. next-intl vs. Intlayer Blog-Beitrag.

So generieren Sie next-i18next-Wörterbücher mit Intlayer

Warum Intlayer mit next-i18next verwenden?

Intlayer-Inhaltsdeklarationsdateien bieten im Allgemeinen eine bessere Entwicklererfahrung. Sie sind flexibler und wartungsfreundlicher aufgrund zweier Hauptvorteile:

1. Flexible Platzierung: Eine Intlayer-Inhaltsdeklarationsdatei kann überall im Dateibaum der Anwendung platziert werden, was die Verwaltung von duplizierten oder gelöschten Komponenten vereinfacht, ohne nicht verwendete Inhaltsdeklarationen zu hinterlassen.

   Beispiel-Dateistrukturen:

   bash

   .└── src    └── components        └── MyComponent            ├── index.content.ts # Inhaltsdeklarationsdatei            └── index.tsx

2. Zentralisierte Übersetzungen: Intlayer speichert alle Übersetzungen in einer einzigen Datei und stellt sicher, dass keine Übersetzung fehlt. Bei der Verwendung von TypeScript werden fehlende Übersetzungen automatisch erkannt und als Fehler gemeldet.

Installation

npm install intlayer i18next next-i18next i18next-resources-to-backend

Konfigurieren von Intlayer, um i18next-Wörterbücher zu exportieren

Der Export von i18next-Ressourcen garantiert keine 1:1-Kompatibilität mit anderen Frameworks. Es wird empfohlen, eine auf Intlayer basierende Konfiguration zu verwenden, um Probleme zu minimieren.

Um i18next-Ressourcen zu exportieren, konfigurieren Sie Intlayer in einer intlayer.config.ts-Datei. Beispielkonfigurationen:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    dictionaryOutput: ["i18next"],    i18nextResourcesDir: "./i18next/resources",  },};export default config;

Hier ist die Fortsetzung und Korrektur der verbleibenden Teile Ihres Dokuments:

Importieren von Wörterbüchern in Ihre i18next-Konfiguration

Um die generierten Ressourcen in Ihre i18next-Konfiguration zu importieren, verwenden Sie i18next-resources-to-backend. Nachfolgend einige Beispiele:

import i18next from "i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next.use(  resourcesToBackend(    (language: string, namespace: string) =>      import(`../i18next/resources/${language}/${namespace}.json`)  ));

Inhaltsdeklaration

Beispiele für Inhaltsdeklarationsdateien in verschiedenen Formaten:

import { t, type DeclarationContent } from "intlayer";const content = {  key: "my-content",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} satisfies DeclarationContent;export default content;

Erstellen der next-i18next Ressourcen

Um die next-i18next Ressourcen zu erstellen, führen Sie den folgenden Befehl aus:

npx run intlayer build

Dies generiert Ressourcen im Verzeichnis ./i18next/resources. Die erwartete Ausgabe:

.└── i18next    └── resources       └── en           └── my-content.json       └── fr           └── my-content.json       └── es           └── my-content.json

Hinweis: Der i18next-Namespace entspricht dem Intlayer-Deklarationsschlüssel.

Next.js-Plugin implementieren

Sobald konfiguriert, implementieren Sie das Next.js-Plugin, um Ihre i18next-Ressourcen neu zu erstellen, wann immer die Intlayer-Inhaltsdeklarationsdateien aktualisiert werden.

import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

Verwendung von Inhalten in Next.js-Komponenten

Nachdem Sie das Next.js-Plugin implementiert haben, können Sie den Inhalt in Ihren Komponenten verwenden:

import type { FC } from "react";import { useTranslation } from "react-i18next";const IndexPage: FC = () => {  const { t } = useTranslation();  return (    <div>      <h1>{t("my-content.title")}</h1>      <p>{t("my-content.description")}</p>    </div>  );};export default IndexPage;