翻译动态内容

概述

本指南将带您了解如何在 Next.js 服务器组件中使用 <Tx> 组件 和 tx() 函数来翻译动态内容。

在本指南结束时，您将学会如何正确使用这些组件和函数的语法。

我们将涵盖以下内容：

什么是动态内容？

动态内容是指在构建时无法确定的内容。

这些内容可以包括变量、用户名、输入字段等。

例如，以下就是动态内容：

const username = 'John Doe';
<p>Your username is {username}</p>

何时应翻译动态内容？

在大多数情况下，你可以使用 Variable Components 或 Branching Components 来处理动态内容。

这些组件专为配合 <T> 组件处理动态内容而设计，因此我们建议尽可能使用它们。

然而，在某些情况下，你需要按需翻译动态内容。

例如，如果你有一条由用户创建的聊天消息，并希望以不同的语言显示它，你可以使用 gt-next 实现按需翻译。

如何使用 <Tx> 组件

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

只需将你想要翻译的任意 JSX 内容包裹在 <Tx> 组件中即可。

<Tx> 组件会按需翻译内容，并以异步方式渲染翻译后的内容。

更多信息请参见 API 参考。

如何使用 tx() 函数

tx() 函数是一个服务端函数，可用于动态翻译字符串。

import { tx } from 'gt-next/server';

const message = 'Hello, world!';
const translatedMessage = await tx(message);

tx() 函数返回一个 promise，解析后得到翻译后的字符串。

查看更多信息，请参阅 API 参考。

示例

渲染动态内容

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

翻译字符串

import { tx } from 'gt-next/server';

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

生产环境注意事项

<Tx> 组件和 tx() 函数在开发环境和生产环境中的行为是相同的。

无论你使用哪种类型的 API 密钥，行为都是一致的。 在这两种情况下，翻译都是实时按需完成的。

常见陷阱

不必要地使用 <Tx> 和 tx()

只有在你确实无法使用 <T> 组件配合 变量组件 或 分支组件 时，才应该使用 <Tx> 组件或 tx() 函数。

在不需要的情况下使用 <Tx> 和 tx() 会浪费资源，并且会很快用完你的 API 配额。

此外，由于翻译是按需完成的，你的内容渲染速度也会变慢。