Документация

Компоненты сервера React

Magic Translate полностью поддерживает компоненты React Server. Контент переводится на сервере, поэтому поисковые системы и пользователи переводят HTML без использования JavaScript на стороне клиента.

инсталляция

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


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


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

Настройка

Настройте функцию перевода один раз, например в lib/translate.ts. Она работает на вашем сервере, поэтому использует ваш секретный ключ. Сохраните ключ в переменной окружения MAGIC_TRANSLATE_SECRET_KEY.

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


export const translate = setupT({
  secretKey: process.env.MAGIC_TRANSLATE_SECRET_KEY
});

Если у вас еще нет секретного ключа, зарегистрируйтесь на Magic Translate и создайте его на странице своей учетной записи.

Перевод серверного компонента

createLocalizedT привязывает функцию перевода к одному языку и возвращает компонент <T> и функцию t(). Он принимает значение Language или любую локаль, например de или 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>
  );
}

Поскольку на каждой странице используется одна и та же функция перевода, переводы пакетируются и кэшируются во всем приложении.

Для одного компонента createServerT настраивает все за один вызов. Кэшируется только в пределах этого вызова.

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


const { T } = createServerT({
  secretKey: process.env.MAGIC_TRANSLATE_SECRET_KEY,
  locale: 'zh'
});

Компонент <T> из React SSR работает только в компонентах React Server. В клиентских компонентах вместо этого используйте клиент React.

Выбор языка для каждого компонента

createT возвращает компонент <T>, который принимает язык как prop. Это полезно, когда язык отличается от компонента к компоненту.

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

Все компоненты <T> принимают те же параметры, что и клиентский компонент <T>, например formality.

Пример проекта

Пример проекта SSR можно найти на GitHub.

ПредыдущееuseT hookСледующийФункция перевода