Komponenty serwera React

Magic Translate w pełni obsługuje komponenty serwera React. Treść jest tłumaczona na serwerze, więc wyszukiwarki i użytkownicy otrzymują tłumaczenie HTML bez JavaScript po stronie klienta.

Instalacja

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

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

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

Konfiguracja

Skonfiguruj funkcję tłumaczenia raz, na przykład w lib/translate.ts. Zachowaj klucz API w zmiennej środowiskowej.

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

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

Jeśli nie masz jeszcze klucza API, zarejestruj się w Magic Translate, aby go otrzymać.

Tłumaczenie komponentu serwera

createLocalizedT wiąże funkcję translacji z jednym językiem i zwraca składnik <T> i funkcję t(). Akceptuje Language lub dowolne ustawienia lokalne, takie jak de lub 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>
  );
}

Ponieważ każda strona ma tę samą funkcję tłumaczenia, tłumaczenia są grupowane i buforowane w całej aplikacji.

W przypadku pojedynczego komponentu createServerT ustawia wszystko w jednym wywołaniu. Zapisuje się tylko w ramach tego wezwania.

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

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

Komponent <T> z React SSR działa tylko w komponentach serwera React. W komponentach klienta zamiast tego użyj klienta React.

Wybór języka na komponent

createT zwraca składnik <T>, który przyjmuje język jako prop. Jest to przydatne, gdy język różni się w zależności od komponentu.

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>;

Wszystkie komponenty <T> akceptują te same opcje co komponent klienta <T>, takie jak formality.

Przykładowy projekt

Przykładowy projekt SSR można znaleźć na GitHub.