Componentes del servidor React

Magic Translate es totalmente compatible con los componentes del servidor React. El contenido se traduce en el servidor, por lo que los motores de búsqueda y los usuarios traducen el HTML sin ningún tipo de JavaScript del lado del cliente.

Instalación

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

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

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

Configuración

Configura la función de traducción una vez, por ejemplo, en lib/translate.ts. Mantén tu clave de API en una variable de entorno.

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

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

Si aún no tienes una clave de API, regístrate en Magic Translate para conseguir una.

Traducir un componente de servidor

createLocalizedT vincula la función de traducción a un idioma y devuelve el componente <T> y la función t(). Acepta Language o cualquier ubicación, como de o 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 las páginas comparten la misma función de traducción, las traducciones se agrupan en lotes y se almacenan en caché en toda la aplicación.

Para un solo componente, createServerT lo configura todo en una sola llamada. Solo se almacena en caché dentro de esa llamada.

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

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

El componente <T> de React SSR solo funciona en React Server Components. En los componentes del cliente, usa el cliente React en su lugar.

Elegir el idioma por componente

createT devuelve un componente <T> que toma el idioma como prop. Esto es útil cuando el idioma difiere de un componente a otro.

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 los componentes <T> aceptan las mismas opciones que el componente <T> del cliente, como formality.

Ejemplo de proyecto

Puedes encontrar un ejemplo de proyecto de SSR en GitHub.