Componenti del server React

Magic Translate supporta completamente i componenti di React Server. Il contenuto viene tradotto sul server, quindi i motori di ricerca e gli utenti ottengono l'HTML tradotto senza JavaScript sul lato client.

Installazione

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

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

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

Configurazione

Imposta la funzione di traduzione una volta, ad esempio in lib/translate.ts. Conserva la tua chiave API in una variabile di ambiente.

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

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

Se non hai ancora una chiave API, iscriviti a Magic Translate per ottenerne una.

Tradurre un componente del server

createLocalizedT associa la funzione di traduzione a una lingua e restituisce il componente <T> e la funzione t(). Accetta un Language o qualsiasi locale come 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>
  );
}

Poiché ogni pagina condivide la stessa funzione di traduzione, le traduzioni vengono raggruppate e memorizzate nella cache dell'intera app.

Per un singolo componente, createServerT configura tutto in una chiamata. Viene memorizzato nella cache solo all'interno di quella chiamata.

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

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

Il componente <T> di React SSR funziona solo in React Server Components. Nei componenti del client, usa invece il client React.

Scelta della lingua per componente

createT restituisce un componente <T> che accetta la lingua come prop. Questo è utile quando la lingua è diversa da componente a 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>;

Tutti i componenti <T> accettano le stesse opzioni del componente <T> del client, ad esempio formality.

Esempio di progetto

Puoi trovare un esempio di progetto SSR su GitHub.