Documentation

Umwelt

Intlayer mit Next.js

Getting Started internationalizing (i18n) with Intlayer and Next.js 15 App Router

Was ist Intlayer?

Intlayer ist eine innovative, Open-Source-Bibliothek für Internationalisierung (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen. Intlayer integriert sich nahtlos mit dem neuesten Next.js 15 Framework, einschließlich seines leistungsstarken App Routers. Es ist optimiert für die Arbeit mit Serverkomponenten für eine effiziente Rendering und vollständig kompatibel mit Turbopack.

Mit Intlayer können Sie:

Übersetzungen einfach verwalten mithilfe deklarativer Wörterbücher auf Komponentenniveau.
Metadaten, Routen und Inhalte dynamisch lokalizieren.
Übersetzungen sowohl in clientseitigen als auch serverseitigen Komponenten zugreifen.
TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
Von fortschrittlichen Funktionen profitieren, wie dynamischer Lokalisierungserkennung und Wechseln.

Hinweis: Intlayer ist mit Next.js 12, 13, 14 und 15 kompatibel. Wenn Sie den Next.js Page Router verwenden, können Sie sich an dieser Anleitung orientieren. Für Next.js 12, 13, 14 mit App Router, lesen Sie diese Anleitung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Next.js-Anwendung

Schritt 1: Abhängigkeiten installieren

Installieren Sie die erforderlichen Pakete mit npm:

bash

1npm install intlayer next-intlayer

bash

1yarn add intlayer next-intlayer

bash

1pnpm add intlayer next-intlayer

Schritt 2: Konfigurieren Sie Ihr Projekt

Erstellen Sie eine Konfigurationsdatei zur Konfiguration der Sprachen Ihrer Anwendung:

typescript

1// intlayer.config.ts
2
3import { Locales, type IntlayerConfig } from "intlayer";
4
5const config: IntlayerConfig = {
6  internationalization: {
7    locales: [
8      Locales.ENGLISH,
9      Locales.FRENCH,
10      Locales.SPANISH,
11      // Ihre anderen Sprachen
12    ],
13    defaultLocale: Locales.ENGLISH,
14  },
15};
16
17export default config;

Um alle verfügbaren Parameter zu sehen, lesen Sie die Konfigurationsdokumentation hier.

Schritt 3: Integrieren Sie Intlayer in Ihre Next.js-Konfiguration

Konfigurieren Sie Ihr Next.js-Setup, um Intlayer zu verwenden:

typescript

1// next.config.mjs
2import { withIntlayer } from "next-intlayer/server";
3
4/** @type {import('next').NextConfig} */
5const nextConfig = {};
6
7export default withIntlayer(nextConfig);

Schritt 4: Middleware für die Lokalisierungserkennung konfigurieren

Richten Sie eine Middleware ein, um die bevorzugte Sprache des Benutzers zu erkennen:

typescript

1// src/middleware.ts
2export { intlayerMiddleware as middleware } from "next-intlayer/middleware";
3
4export const config = {
5  matcher: "/((?!api|static|.*\\..*|_next).*)",
6};

Schritt 5: Dynamische Lokalisierungsrouten definieren

Implementieren Sie dynamisches Routing für lokalisierte Inhalte:

Ändern Sie src/app/page.ts in src/app/[locale]/page.ts

Implementieren Sie dann die Funktion generateStaticParams in Ihrem Anwendungslayout.

tsx

1// src/app/layout.tsx
2
3import type { ReactNode } from "react";
4import "./globals.css";
5
6export { generateStaticParams } from "next-intlayer"; // Zeile zum Einfügen
7
8const RootLayout = ({
9  children,
10}: Readonly<{
11  children: ReactNode;
12}>) => children;
13
14export default RootLayout;

Fügen Sie dann ein neues Layout in Ihr [locale]-Verzeichnis ein:

tsx

1// src/app/[locale]/layout.tsx
2
3import { type NextLayoutIntlayer } from "next-intlayer";
4import { Inter } from "next/font/google";
5import { getHTMLTextDir } from "intlayer";
6
7const inter = Inter({ subsets: ["latin"] });
8
9const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {
10  const { locale } = await params;
11  return (
12    <html lang={locale} dir={getHTMLTextDir(locale)}>
13      <body className={inter.className}>{children}</body>
14    </html>
15  );
16};
17
18export default LocaleLayout;

Schritt 6: Erklären Sie Ihren Inhalt

Erstellen und verwalten Sie Ihre Inhaltswörterbücher:

tsx

1// src/app/[locale]/page.content.ts
2import { t, type DeclarationContent } from "intlayer";
3
4const pageContent = {
5  key: "page",
6  content: {
7    getStarted: {
8      main: t({
9        en: "Get started by editing",
10        fr: "Commencez par éditer",
11        es: "Comience por editar",
12      }),
13      pageLink: "src/app/page.tsx",
14    },
15  },
16} satisfies DeclarationContent;
17
18export default pageContent;

Siehe, wie Sie Ihre Intlayer-Erklärungsdateien deklarieren.

Schritt 7: Inhalt in Ihrem Code nutzen

Greifen Sie auf Ihre Inhaltswörterbücher in Ihrer gesamten Anwendung zu:

tsx

1// src/app/[locale]/page.ts
2
3import { ClientComponentExample } from "@component/ClientComponentExample";
4import { LocaleSwitcher } from "@component/LangSwitcherDropDown";
5import { NestedServerComponentExample } from "@component/NestedServerComponentExample";
6import { ServerComponentExample } from "@component/ServerComponentExample";
7import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
8import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";
9
10const PageContent = () => {
11  const { title, content } = useIntlayer("page");
12
13  return (
14    <>
15      <p>{content.getStarted.main}</p>
16      <code>{content.getStarted.pageLink}</code>
17    </>
18  );
19};
20
21const Page: NextPageIntlayer = async ({ params }) => {
22  const { locale } = await params;
23
24  return (
25    <>
26      {/**
27       * IntlayerServerProvider wird verwendet, um die Sprache den Serverkindern bereitzustellen
28       * Funktioniert nicht, wenn im Layout gesetzt
29       */}
30      <IntlayerServerProvider locale={locale}>
31        <PageContent />
32        <ServerComponentExample />
33      </IntlayerServerProvider>
34      {/**
35       * IntlayerClientProvider wird verwendet, um die Sprache den Clientkindern bereitzustellen
36       * Kann in jeder übergeordneten Komponente, einschließlich des Layouts, gesetzt werden
37       */}
38      <IntlayerClientProvider locale={locale}>
39        <ClientComponentExample />
40      </IntlayerClientProvider>
41    </>
42  );
43};
44
45export default Page;

tsx

1// src/components/ClientComponentExample.tsx
2
3"use client";
4
5import { useIntlayer } from "next-intlayer";
6
7export const ClientComponentExample = () => {
8  const content = useIntlayer("client-component-example"); // Erstellt eine verwandte Inhaltsdeklaration
9
10  return (
11    <div>
12      <h2>{content.title} </h2>
13      <p>{content.content}</p>
14    </div>
15  );
16};

tsx

1// src/components/ServerComponentExample.tsx
2
3import { useIntlayer } from "next-intlayer/server";
4
5export const ServerComponentExample = () => {
6  const content = useIntlayer("server-component-example"); // Erstellt eine verwandte Inhaltsdeklaration
7
8  return (
9    <div>
10      <h2>{content.title} </h2>
11      <p>{content.content}</p>
12    </div>
13  );
14};

Hinweis: Wenn Sie Ihren Inhalt in einem string-Attribut verwenden möchten, wie alt, title, href, aria-label usw., müssen Sie den Wert der Funktion aufrufen, wie:
tsx
1<img src={content.image.src.value} alt={content.image.value} />

Für detailliertere Verwendung von Intlayer in Client- oder Serverkomponenten siehe das Next.js-Beispiel hier.

(Optional) Schritt 8: Internationalisierung Ihrer Metadaten

Falls Sie Ihre Metadaten, wie den Titel Ihrer Seite, internationalisieren möchten, können Sie die Funktion generateMetadata verwenden, die von Next.js bereitgestellt wird. Verwenden Sie innerhalb der Funktion die Funktion getTranslationContent, um Ihre Metadaten zu übersetzen.

typescript

1// src/app/[locale]/layout.tsx oder src/app/[locale]/page.tsx
2
3import {
4  type IConfigLocales,
5  getTranslationContent,
6  getMultilingualUrls,
7} from "intlayer";
8import type { Metadata } from "next";
9import type { LocalParams } from "next-intlayer";
10
11export const generateMetadata = ({
12  params: { locale },
13}: LocalParams): Metadata => {
14  const t = <T>(content: IConfigLocales<T>) =>
15    getTranslationContent(content, locale);
16
17  /**
18   * Generiert ein Objekt, das alle URLs für jede Sprache enthält.
19   *
20   * Beispiel:
21   * ```ts
22   *  getMultilingualUrls('/about');
23   *
24   *  // Gibt zurück
25   *  // {
26   *  //   en: '/about',
27   *  //   fr: '/fr/about',
28   *  //   es: '/es/about',
29   *  // }
30   * ```
31   */
32  const multilingualUrls = getMultilingualUrls("/");
33
34  return {
35    title: t<string>({
36      en: "My title",
37      fr: "Mon titre",
38      es: "Mi título",
39    }),
40    description: t({
41      en: "My description",
42      fr: "Ma description",
43      es: "Mi descripción",
44    }),
45    alternates: {
46      canonical: url,
47      languages: { ...multilingualUrls, "x-default": "/" },
48    },
49    openGraph: {
50      url: multilingualUrls[locale],
51    },
52  };
53};
54
55// ... Rest des Codes

Erfahren Sie mehr über die Optimierung von Metadaten in der offiziellen Next.js-Dokumentation.

(Optional) Schritt 9: Internationalisierung Ihrer sitemap.xml und robots.txt

Um Ihre sitemap.xml und robots.txt zu internationalisieren, können Sie die Funktion getMultilingualUrls verwenden, die von Intlayer bereitgestellt wird. Diese Funktion ermöglicht es Ihnen, mehrsprachige URLs für Ihre Sitemap zu generieren.

tsx

1// src/app/sitemap.ts
2
3import { getMultilingualUrls } from "intlayer";
4import type { MetadataRoute } from "next";
5
6const sitemap = (): MetadataRoute.Sitemap => [
7  {
8    url: "https://example.com",
9    alternates: {
10      languages: getMultilingualUrls("https://example.com"),
11    },
12  },
13  {
14    url: "https://example.com/login",
15    alternates: {
16      languages: getMultilingualUrls("https://example.com/login"),
17    },
18  },
19  {
20    url: "https://example.com/register",
21    alternates: {
22      languages: getMultilingualUrls("https://example.com/register"),
23    },
24  },
25];
26
27export default sitemap;

tsx

1// src/app/robots.ts
2import type { MetadataRoute } from "next";
3import { getMultilingualUrls } from "intlayer";
4
5const getAllMultilingualUrls = (urls: string[]) =>
6  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
7
8const robots = (): MetadataRoute.Robots => ({
9  rules: {
10    userAgent: "*",
11    allow: ["/"],
12    disallow: getAllMultilingualUrls(["/login", "/register"]),
13  },
14  host: "https://example.com",
15  sitemap: `https://example.com/sitemap.xml`,
16});
17
18export default robots;

Erfahren Sie mehr über die Optimierung der Sitemap in der offiziellen Next.js-Dokumentation. Erfahren Sie mehr über die Optimierung der robots.txt in der offiziellen Next.js-Dokumentation.

(Optional) Schritt 10: Ändern der Sprache Ihres Inhalts

Um die Sprache Ihres Inhalts zu ändern, können Sie die Funktion setLocale verwenden, die von dem Hook useLocale bereitgestellt wird. Diese Funktion ermöglicht es Ihnen, die Sprache der Anwendung festzulegen und den Inhalt entsprechend zu aktualisieren.

tsx

1import { Locales } from "intlayer";
2import { useLocale } from "next-intlayer";
3
4const MyComponent = () => {
5  const { setLocale } = useLocale();
6
7  return (
8    <button onClick={() => setLocale(Locales.English)}>Sprache ändern</button>
9  );
10};

TypeScript konfigurieren

Intlayer nutzt die Modulerweiterung, um die Vorteile von TypeScript zu nutzen und Ihren Code zu stärken.

alt text

Stellen Sie sicher, dass Ihre TypeScript-Konfiguration die automatisch generierten Typen umfasst.

json5

1// tsconfig.json
2
3{
4  // Ihre benutzerdefinierte Konfiguration
5  include: [
6    "src",
7    "types", // <- Die automatisch generierten Typen einfügen
8  ],
9}

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 eingegeben werden.

Um dies zu tun, können Sie die folgenden Anweisungen in Ihre .gitignore-Datei hinzufügen:

gitignore

1# Ignoriere die von Intlayer generierten Dateien
2.intlayer

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Funktionsabruf Next.js 14 und App Router

Getting Started internationalizing (i18n) with Intlayer and Next.js 15 App Router

Was ist Intlayer?

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Next.js-Anwendung

Schritt 1: Abhängigkeiten installieren

Schritt 2: Konfigurieren Sie Ihr Projekt

Schritt 3: Integrieren Sie Intlayer in Ihre Next.js-Konfiguration

Schritt 4: Middleware für die Lokalisierungserkennung konfigurieren

Schritt 5: Dynamische Lokalisierungsrouten definieren

Schritt 6: Erklären Sie Ihren Inhalt

Schritt 7: Inhalt in Ihrem Code nutzen

(Optional) Schritt 8: Internationalisierung Ihrer Metadaten

(Optional) Schritt 9: Internationalisierung Ihrer sitemap.xml und robots.txt

(Optional) Schritt 10: Ändern der Sprache Ihres Inhalts

TypeScript konfigurieren

Git-Konfiguration

Auf dieser Seite