Next.js Integration: useIntlayer Hook Dokumentation

Der useIntlayer Hook ist speziell für Next.js-Anwendungen entwickelt, um lokalisierten Inhalt effizient abzurufen und zu verwalten. Diese Dokumentation konzentriert sich darauf, wie der Hook innerhalb von Next.js-Projekten verwendet wird, um eine korrekte Lokalisierung sicherzustellen.

Importieren von useIntlayer in Next.js

Je nachdem, ob Sie in einer Client- oder Server-Komponente einer Next.js-Anwendung arbeiten, können Sie den useIntlayer Hook wie folgt importieren:

• Client-Komponente:

  typescript

  Inhalt kopieren

  Code kopieren

  Kopieren Sie den Code in die Zwischenablage

  import { useIntlayer } from "next-intlayer"; // Wird in Client-seitigen Komponenten verwendet

• Server-Komponente:

  tsx

  Inhalt kopieren

  Code kopieren

  Kopieren Sie den Code in die Zwischenablage

  import { useIntlayer } from "next-intlayer/server"; // Wird in Server-seitigen Komponenten verwendet

Parameter

1. key: Ein String-Identifikator für den Wörterbuchschlüssel, von dem Sie Inhalte abrufen möchten.
2. locale (optional): Eine spezifische Locale, die verwendet werden soll. Wenn ausgelassen, verwendet der Hook standardmäßig die im Client- oder Server-Kontext gesetzte Locale.

Wörterbuchdateien

Es ist entscheidend, dass alle Inhalts-Schlüssel in Inhaltsdeklarationsdateien definiert sind, um Laufzeitfehler zu vermeiden und Typensicherheit zu gewährleisten. Dieser Ansatz erleichtert auch die Integration von TypeScript für die Validierung zur Kompilierzeit.

Anleitungen zum Einrichten von Inhaltsdeklarationsdateien finden Sie hier.

Beispielhafte Verwendung in Next.js

So können Sie den useIntlayer-Hook in einer Next.js-Seite implementieren, um lokalisierten Inhalt dynamisch basierend auf der aktuellen Anwendungslocale zu laden:

import { ClientComponentExample } from "@components/ClientComponentExample";
import { ServerComponentExample } from "@components/ServerComponentExample";
import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";
import { useIntlayer, IntlayerServerProvider } from "next-intlayer/server";

const HomePage: NextPageIntlayer = async ({ params }) => {
  const { locale } = await params;

  const content = useIntlayer("homepage", locale);

  return (
    <>
      <p>{content.introduction}</p>
      <IntlayerClientProvider locale={locale}>
        <ClientComponentExample />
      </IntlayerClientProvider>
      <IntlayerServerProvider locale={locale}>
        <ServerComponentExample />
      </IntlayerServerProvider>
    </>
  );
};

"use-client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const ClientComponentExample: FC = () => {
  // Verwenden Sie den Intlayer-Hook, um den Inhalt für die Komponente zu laden
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

import type { FC } from "react";
import { useIntlayer } from "next-intlayer/server";

const ServerComponentExample: FC = () => {
  // Verwenden Sie den Intlayer-Hook, um den Inhalt für die Server-Komponente zu laden
  const content = useIntlayer("component-content");

  return (
    <div>
      <h1>{content.title}</h1>
      <p>{content.description}</p>
    </div>
  );
};

Umgang mit der Attribut-Lokalisierung

Um Attribute wie alt, title, href, aria-label usw. zu lokalisieren, stellen Sie sicher, dass Sie den Inhalt korrekt referenzieren:

<img src={content.image.src.value} alt={content.image.alt.value} /><img src={content.image.src.toString()} alt={content.image.alt.toString()} /><img src={String(content.image.src)} alt={String(content.image.alt)} />

Weitere Informationen

• Intlayer Visual Editor: Erfahren Sie, wie Sie den visuellen Editor für eine einfachere Inhaltsverwaltung hier verwenden.

Diese Dokumentation beschreibt die Verwendung des useIntlayer Hooks speziell in Next.js-Umgebungen und bietet eine robuste Lösung zur Verwaltung der Lokalisierung in Ihren Next.js-Anwendungen.