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

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

Das next-intlayer-Paket ermöglicht es Ihnen, Ihre Next.js-Anwendung zu internationalisieren. Es stellt Kontext-Provider und Hooks für die Internationalisierung in Next.js bereit. Zusätzlich 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-Weiterleitungen.

Warum sollten Sie 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 bereitzustellen. Diese Fähigkeit verbessert die Benutzererfahrung und erweitert die Reichweite Ihrer Anwendung, indem sie für Menschen aus verschiedenen sprachlichen Hintergründen zugänglicher und relevanter wird.

Warum Intlayer integrieren?

• JavaScript-basiertes Content-Management: Nutzen Sie die Flexibilität von JavaScript, um Ihre Inhalte effizient zu definieren und zu verwalten.
• Typensichere Umgebung: Verwenden Sie TypeScript, um sicherzustellen, dass alle Ihre Inhaltsdefinitionen präzise und fehlerfrei sind.
• Integrierte Content-Dateien: Halten Sie Ihre Übersetzungen nahe bei den jeweiligen Komponenten, um Wartbarkeit und Übersichtlichkeit zu verbessern.

Installation

Installieren Sie das erforderliche Paket mit Ihrem bevorzugten Paketmanager:

npm install next-intlayer

Anwendungsbeispiel

Mit Intlayer können Sie Ihre Inhalte strukturiert an beliebiger Stelle in Ihrem Code deklarieren.

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

Sie können die Standarderweiterung ändern, indem Sie die Eigenschaft contentDir 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 ist dafür gemacht, mit dem intlayer-Paket zu arbeiten. intlayer ist ein Paket, das es Ihnen ermöglicht, Ihren Inhalt überall im Code zu deklarieren. Es wandelt mehrsprachige Inhaltsdeklarationen in strukturierte Wörterbücher um, die sich nahtlos in Ihre Anwendung integrieren.

Hier ist ein Beispiel für eine Inhaltsdeklaration:

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

Verwendung von Inhalten in Ihrem Code

Sobald Sie Ihren Inhalt deklariert haben, können Sie ihn in Ihrem Code verwenden. Hier ist ein Beispiel, wie Sie den Inhalt 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"); // Erstelle zugehörige Inhaltsdeklaration  return (    <div>      <p>{myTranslatedContent}</p>    </div>  );};

Beherrschung der Internationalisierung Ihrer Next.js-Anwendung

Intlayer bietet viele Funktionen, die Ihnen helfen, Ihre Next.js-Anwendung zu internationalisieren. Hier sind einige der wichtigsten Funktionen:

• Internationalisierung von Server-Komponenten: Intlayer ermöglicht es Ihnen, Ihre Server-Komponenten auf die gleiche Weise zu internationalisieren wie Ihre Client-Komponenten. Das bedeutet, dass Sie dieselben Inhaltsdeklarationen sowohl für Client- als auch für Server-Komponenten verwenden können.
• Middleware zur Spracherkennung: Intlayer stellt Middleware bereit, um die bevorzugte Sprache des Benutzers zu erkennen. Diese Middleware wird verwendet, um die bevorzugte Sprache des Benutzers zu ermitteln und ihn auf die entsprechende URL weiterzuleiten, wie in der Konfiguration angegeben.
• Internationalisierung von Metadaten: Intlayer bietet eine Möglichkeit, Ihre Metadaten zu internationalisieren, wie z. B. den Titel Ihrer Seite, mithilfe der von Next.js bereitgestellten Funktion generateMetadata. Sie können die Funktion getTranslation verwenden, um Ihre Metadaten zu übersetzen.
• Internationalisierung von sitemap.xml und robots.txt: Intlayer ermöglicht die Internationalisierung Ihrer sitemap.xml- und robots.txt-Dateien. Sie können die Funktion getMultilingualUrls verwenden, um mehrsprachige URLs für Ihre Sitemap zu generieren.
• Internationalisierung von URLs: Intlayer ermöglicht die Internationalisierung Ihrer URLs durch die Verwendung der Funktion getMultilingualUrls. 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.

Vom Paket next-intlayer bereitgestellte Funktionen

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

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

Dokumentationshistorie

• 5.5.10 - 2025-06-29: Initiale Historie