next-intlayer: NPM Paket zur Internationalisierung (i18n) einer Next.js-Anwendung

Intlayer ist eine Suite von Paketen, die speziell für JavaScript-Entwickler entwickelt wurde. Es ist mit Frameworks wie React, Next.js und Express.js kompatibel.

Das next-intlayer Paket ermöglicht es Ihnen, Ihre Next.js-Anwendung zu internationalisieren. Es bietet Kontext-Provider und Hooks für die Internationalisierung von Next.js. Darüber hinaus enthält es das Next.js-Plugin zur Integration von Intlayer mit Webpack oder Turbopack, sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Umleitungen.

Warum Ihre Next.js-Anwendung internationalisieren?

Die Internationalisierung Ihrer Next.js-Anwendung ist entscheidend, um ein globales Publikum effektiv zu bedienen. Sie ermöglicht es Ihrer Anwendung, Inhalte und Nachrichten in der bevorzugten Sprache jedes Benutzers zu liefern. Diese Fähigkeit verbessert das Benutzererlebnis und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen Sprachhintergründen zugänglicher und relevanter wird.

Warum Intlayer integrieren?

• JavaScript-gestützte Inhaltsverwaltung: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
• Typensichere Umgebung: Nutzen Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
• Integrierte Inhaltsdateien: Halten Sie Ihre Übersetzungen in der Nähe ihrer jeweiligen Komponenten, was die Wartbarkeit und Klarheit erhöht.

Installation

Installieren Sie das notwendige Paket mit Ihrem bevorzugten Paketmanager:

npm install next-intlayer

Beispiel für die Verwendung

Mit Intlayer können Sie Ihre Inhalte überall in Ihrem Code strukturiert deklarieren.

Standardmäßig durchsucht Intlayer nach Dateien mit der Erweiterung .content.{ts,tsx,js,jsx,mjs,cjs}.

Sie können die Standarderweiterung ändern, indem Sie die contentDir-Eigenschaft in der Konfigurationsdatei festlegen.

.├── intlayer.config.ts└── src    └── components        ├── ClientComponent        │   ├── index.content.ts        │   └── index.tsx        └── ServerComponent            ├── index.content.ts            └── index.tsx

Deklarieren Sie Ihre Inhalte

next-intlayer funktioniert mit dem intlayer Paket. intlayer ist ein Paket, das es Ihnen ermöglicht, Ihre Inhalte überall in Ihrem Code zu deklarieren. Es konvertiert mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher, die nahtlos in Ihre Anwendung integriert werden.

Hier ist ein Beispiel für eine Inhaltsdeklaration:

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Weniger als minus ein Auto",      "-1": "Minus ein Auto",      "0": "Keine Autos",      "1": "Ein Auto",      ">5": "Einige Autos",      ">19": "Viele Autos",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

Nutzen Sie Inhalte in Ihrem Code

Sobald Sie Ihre Inhalte deklariert haben, können Sie sie in Ihrem Code verwenden. Hier ist ein Beispiel, wie Sie die Inhalte in einer React-Komponente verwenden:

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const { myTranslatedContent } = useIntlayer("client-component"); // Erstellen Sie die zugehörige Inhaltsdeklaration  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Beherrschen der Internationalisierung Ihrer Next.js-Anwendung

Intlayer bietet viele Funktionen, um Ihnen bei der Internationalisierung Ihrer Next.js-Anwendung zu helfen. Hier sind einige der Hauptmerkmale:

• Internationalisierung von Serverkomponenten: Intlayer ermöglicht es Ihnen, Ihre Serverkomponenten auf dieselbe Weise zu internationalisieren wie Ihre Clientkomponenten. Das bedeutet, dass Sie dieselben Inhaltsdeklarationen für sowohl Client- als auch Serverkomponenten verwenden können.
• Middleware zur Spracherkennung: Intlayer bietet Middleware zur Erkennung der bevorzugten Sprache des Benutzers. Diese Middleware wird verwendet, um die bevorzugte Sprache des Benutzers zu erkennen und ihn zur entsprechenden URL weiterzuleiten, wie in der Konfiguration angegeben.
• Internationalisierung von Metadaten: Intlayer bietet eine Möglichkeit zur Internationalisierung Ihrer Metadaten, wie dem Titel Ihrer Seite, unter Verwendung der von Next.js bereitgestellten Funktion generateMetadata. Sie können die Funktion getTranslationContent verwenden, um Ihre Metadaten zu übersetzen.
• Internationalisierung von sitemap.xml und robots.txt: Intlayer ermöglicht es Ihnen, Ihre sitemap.xml- und robots.txt-Dateien zu internationalisieren. Sie können die Funktion getMultilingualUrls verwenden, um mehrsprachige URLs für Ihre Sitemap zu generieren.
• Internationalisierung von URLs: Intlayer ermöglicht es Ihnen, Ihre URLs zu internationalisieren, indem Sie die Funktion getMultilingualUrls verwenden. Diese Funktion generiert mehrsprachige URLs für Ihre Sitemap.

Um mehr über diese Funktionen zu erfahren, lesen Sie den Leitfaden Next.js Internationalisierung (i18n) mit Intlayer und Next.js 15 App Router.

Funktionen des next-intlayer Pakets

Das next-intlayer Paket bietet auch einige Funktionen, die Ihnen helfen, Ihre Anwendung zu internationalisieren.

• t()
• useIntlayer()
• useDictionary()
• useLocale()
• useIntlayerAsync()