useGT()

概述

useGT() 函数是一个用于在构建时翻译字符串的客户端钩子。

const t = useGT();
 
<p>{  t('这段文字将被翻译')  }</p>;

参考

参数

无

返回值

一个回调函数，t()，用于翻译提供的内容。

(content: string, options?: InlineTranslationOptions) => string

行为

生产环境

在 CD 过程中，任何位于 t() 函数内的内容将在应用程序部署之前被翻译。 这确保了所有语言环境的快速加载时间，但它只能翻译构建时已知的内容。

一旦生成，翻译内容将根据您的配置（1）存储在 CDN 中或（2）存储在应用程序的构建输出中。 从那里，翻译后的内容将提供给您的用户。 如果找不到翻译，它将回退到原始内容。

请确保遵循此处的部署指南。

开发环境

在开发过程中，t() 函数将按需翻译内容。 这对于原型设计您的应用在不同语言中的外观非常有用。 请记得在您的环境中添加一个开发 API 密钥以启用此行为。

在开发中，按需翻译时您会看到延迟。 除非内容被明确按需翻译，否则在生产构建中不会发生这种情况， 即使用 tx() 或 <Tx>。

示例

基本用法

您可以使用 useGT() 来翻译字符串。

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

注意: "Alice" 将被翻译为用户的首选语言。

使用变量

您可以将变量传递给字典翻译。

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

注意: "Alice" 不会被翻译为用户的首选语言，因为它是一个变量。

注意事项

• useGT() 函数是一个客户端钩子，用于翻译字符串。
• 使用 useGT() 的翻译字符串在运行时之前发生，在构建过程中进行（除非在开发中）。

下一步

• 查看 getGT() 以获取构建时服务器端字符串翻译。
• 对于运行时翻译，请参阅 tx() 和 <Tx>。
• 查看 InlineTranslationOptions 以获取有关自定义翻译的更多信息。