Reactサーバーコンポーネント

Magic Translate は React サーバーコンポーネントを完全にサポートしている。コンテンツはサーバー上で翻訳されるので、検索エンジンとユーザーはクライアント側のJavaScriptなしで翻訳されたHTMLを受け取る。

設置

# 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 で。APIキーは環境変数に入れておく。

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

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

APIキーをまだ持っていないなら、Magic Translate にサインアップして取得しよう。

サーバーコンポーネントを翻訳する

createLocalizedT は翻訳関数を1つの言語にバインドし、<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>
  );
}

すべてのページが同じ翻訳機能を共有しているので、翻訳はアプリ全体で一括してキャッシュされる。

1つのコンポーネントの場合、createServerT は1回の呼び出しですべてを設定する。その呼び出しの中でのみキャッシュされる。

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

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

React SSRの <T> コンポーネントは、Reactサーバーコンポーネントでのみ動作する。クライアントコンポーネントでは、代わりにReactクライアントを使う。

コンポーネントごとに言語を選択する

createT は、言語を prop と見なす <T> コンポーネントを返す。これは、言語がコンポーネントごとに異なる場合に役立つ。

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> コンポーネントは、formality など、クライアント <T> コンポーネントと同じオプションを受け入れる。

サンプルプロジェクト

SSRプロジェクトの例はGitHubにある。