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 将翻译函数绑定到一种语言并返回 <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>
  );
}

由于每个页面共享相同的翻译功能，因此翻译会在整个应用程序中进行批处理和缓存。

对于单个组件，createServerT 在一次调用中设置所有内容。它仅在该调用中缓存。

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> 组件接受与客户端 <T> 组件相同的选项，例如 formality。

示例项目

你可以在 GitHub 上找到一个示例 SSR 项目。