Componentes do servidor React

Magic Translate suporta totalmente os componentes do React Server. O conteúdo é traduzido no servidor, para que os mecanismos de pesquisa e os usuários obtenham HTML traduzido sem nenhum JavaScript do lado do cliente.

Instalação

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

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

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

Configuração

Configure a função de tradução uma vez, por exemplo, em lib/translate.ts. Mantenha sua chave de API em uma variável de ambiente.

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

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

Se você ainda não tem uma chave de API, inscreva-se no Magic Translate para obter uma.

Traduzindo um componente de servidor

createLocalizedT vincula a função de tradução a um idioma e retorna o componente <T> e a função t(). Ele aceita Language ou qualquer localidade, como de ou 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>
  );
}

Como todas as páginas compartilham a mesma função de tradução, as traduções são agrupadas e armazenadas em cache em todo o aplicativo.

Para um único componente, createServerT configura tudo em uma chamada. Ele armazena em cache somente dentro dessa chamada.

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

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

O componente <T> do React SSR só funciona nos componentes do React Server. Em componentes do cliente, use o cliente React em vez disso.

Escolhendo o idioma por componente

createT retorna um componente <T> que usa o idioma como prop. Isso é útil quando a linguagem difere de componente para componente.

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

Todos os componentes <T> aceitam as mesmas opções do componente <T> do cliente, como formality.

Exemplo de projeto

Você pode encontrar um exemplo de projeto SSR no GitHub.