Composants du serveur React

Magic Translate est entièrement compatible avec les composants React Server. Le contenu est traduit sur le serveur, de sorte que les moteurs de recherche et les utilisateurs peuvent être traduits en HTML sans JavaScript côté client.

Installation

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

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

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

Configuration

A configuré la fonction de traduction une fois, par exemple dans lib/translate.ts. Conserve ta clé API dans une variable d'environnement.

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

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

Si tu n'as pas encore de clé API, inscris-toi à Magic Translate pour en obtenir une.

Traduire un composant de serveur

createLocalizedT lie la fonction de traduction à une langue et renvoie les composants <T> et t(). Il accepte le Language ou n'importe quel paramètre régional tel que 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>
  );
}

Comme chaque page possède la même fonction de traduction, les traductions sont groupées et mises en cache sur l'ensemble de ton application.

Pour un seul composant, createServerT configure tout en un seul appel. Il n'est mis en cache que pour cet appel.

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

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

Le composant <T> de React SSR ne fonctionne que dans React Server Components. Dans les composants clients, utilise plutôt le client React.

Choix de la langue par composant

createT renvoie un composant <T> qui prend la langue comme prop. C'est utile lorsque la langue diffère d'un composant à l'autre.

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

Tous les composants <T> acceptent les mêmes options que le composant client <T>, par exemple formality.

Exemple de projet

Tu peux trouver un exemple de projet SSR sur GitHub.