Dictionary Translations

getTranslations

getTranslations 服务器端翻译函数的 API 参考

概览

getTranslations 用于在服务端组件中,从translation dictionary获取字符串翻译。

const d = await getTranslations(); // 获取翻译函数
d('greeting.hello'); // 传递 id 获取翻译

getTranslations 支持:

  • 翻译字符串和 JSX 内容。
    • 在翻译中插入变量并使用条件逻辑。
    • 可选的 id 前缀。

关于客户端翻译,请参阅 useTranslations

getTranslationsuseTranslations 使用一个 字典 来存储所有用于翻译的内容。 这与使用 <T> 组件 进行翻译的方式不同。 如果你只打算使用 <T> 组件进行翻译,那么本文档与你无关。

参考资料

属性

Prop

Type

描述

Prop描述
id可选的前缀,将被添加到所有翻译键之前。适用于处理嵌套字典的值。

返回值

一个 d 翻译函数的 Promise;在传入 id 时,该函数将返回对应 Entry 的译文

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>
名称类型描述
idstring要翻译的 Entry 的 id
options?DictionaryTranslationOptions用于自定义 d 行为的翻译选项。

示例

字典的基础用法

字典中的每个 Entry 都会被 translate。

dictionary.jsx
const dictionary = {
  greeting: <>你好,Alice!</>, 
};
export default dictionary;

当我们需要(在服务端)访问这些条目时,调用 getTranslations。 它会返回一个函数,该函数接收字典中某个翻译项的键。

TranslateGreeting.jsx
import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // 你好,Alice // [!code highlight]
    </p>
  );
}

使用变量

要传递值,你需要 (1) 先为其分配一个标识符,(2) 在调用 d 函数时引用该标识符。

在以下示例中,我们使用 {} 向翻译传入变量。 在字典中,我们将 {userName} 设为标识符。

dictionary.jsx
const dictionary = {
  greeting: "你好,{userName}!", 
};
export default dictionary;
TranslateGreeting.jsx
import { getTranslations } from 'gt-next/server';

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // 你好 Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

使用前缀

我们可以通过前缀仅获取字典的部分内容。

dictionary.jsx
const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "你好,Bob",
    }
  }
};
export default dictionary;

因为我们在 getTranslations 方法中添加了 value 'prefix1.prefix2',所以所有键都会带上 prefix1.prefix2 前缀:

UserDetails.jsx
import { getTranslations } from 'gt-next/server';

export default function UserDetails() {
  const d = await getTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

注意

  • 你可以在服务端通过 getTranslations 函数访问字典中的翻译。

后续步骤

  • 参阅 useTranslations,了解在客户端与 getTranslations 对应的用法。

本指南如何?