React-Serverkomponenten

Magic Translate unterstützt React Server-Komponenten vollständig. Der Inhalt wird auf dem Server übersetzt, sodass Suchmaschinen und Nutzer übersetztes HTML ohne clientseitiges JavaScript erhalten.

Installation

# using npm
npm i @magic-translate/react-ssr

# using yarn
yarn add @magic-translate/react-ssr

# using pnpm
pnpm add @magic-translate/react-ssr

Einrichtung

Richte die Übersetzungsfunktion einmal ein, zum Beispiel in lib/translate.ts. Bewahre deinen API-Schlüssel in einer Umgebungsvariablen auf.

import { setupT } from '@magic-translate/react-ssr';

export const translate = setupT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!
});

Falls du noch keinen API-Schlüssel hast, melde dich für Magic Translate an, um einen zu erhalten.

Eine Serverkomponente übersetzen

createLocalizedT bindet die Übersetzungsfunktion an eine Sprache und gibt die <T>-Komponente und die Funktion t() zurück. Es akzeptiert ein Language oder ein beliebiges Gebietsschema wie de oder pt-BR.

import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function AboutPage() {
  const { T, t } = createLocalizedT(translate, 'de');

  return (
    <article>
      <h1>
        <T>About us</T>
      </h1>
      <img src="/team.jpg" alt={await t('Our team in Zurich')} />
    </article>
  );
}

Da jede Seite dieselbe Übersetzungsfunktion hat, werden Übersetzungen gebündelt und in deiner gesamten App zwischengespeichert.

Für eine einzelne Komponente richtet createServerT alles in einem Anruf ein. Es wird nur innerhalb dieses Anrufs zwischengespeichert.

import { createServerT } from '@magic-translate/react-ssr';

const { T } = createServerT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!,
  locale: 'zh'
});

Die <T>-Komponente von React SSR funktioniert nur in React Server Components. Verwende in den Client-Komponenten stattdessen den React-Client.

Auswahl der Sprache pro Komponente

createT gibt eine <T>-Komponente zurück, die die Sprache als prop annimmt. Das ist nützlich, wenn die Sprache von Komponente zu Komponente unterschiedlich ist.

import { createT, Language } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

const T = createT(translate);

const Greeting = async () => <T lang={Language.ZH}>Please translate me!</T>;

Alle <T>-Komponenten akzeptieren dieselben Optionen wie die Client <T>-Komponente, wie zum Beispiel formality.

Beispielprojekt

Du findest ein Beispiel für ein SSR-Projekt auf GitHub.