getMessages
getMessages() 字符串翻译函数的 API 参考
概览
getMessages 是一个异步函数,用于在构建时翻译来自 msg 的 encoded string。
const m = await getMessages();
<p>{ m(encodedString) }</p>;构建时翻译:
getMessages 的翻译在构建阶段执行,先于应用部署。
你可以从 msg 传入编码字符串(encoded string),它们会被翻译为用户的首选语言。
参考资料
参数
无
返回值
一个回调函数 m 的 Promise,该回调会对 msg 中的已编码内容进行翻译。
Promise<(encodedContent: string, options?: Record<string, any>) => string>| 名称 | 类型 | 说明 |
|---|---|---|
encodedContent | string | 来自 msg、待翻译的编码字符串内容。 |
options? | Record<string, any> | 可选参数,用于覆盖编码字符串中的变量。 |
行为
生产环境
在 CD 过程中,任何位于 msg 函数内的内容都会在应用部署前被翻译。
这可确保所有 locale 的快速加载,但它只能翻译构建时已知的内容。
生成后,翻译将按你的配置 (1) 存储在 CDN(内容分发网络)中,或 (2) 存储在应用的构建输出中。 随后,已翻译的内容会提供给你的用户。 如果未找到翻译,则会回退到原始内容。
请务必遵循此处的部署指南。
开发
在开发过程中,m 函数会按需翻译内容。
这有助于快速预览应用在不同语言下的效果。
请记得在环境中添加 Dev API key 以启用此功能。
在开发环境进行按需翻译时,你可能会看到一些延迟。
在生产构建中不会出现这种情况,除非内容被明确设置为按需翻译,
即使用 tx 或 <Tx>。
示例
基本用法
你可以使用 getMessages 翻译来自 msg 的编码字符串。
import { msg, getMessages } from 'gt-next/server';
const encodedGreeting = msg('你好,Alice!');
export default async function TranslateGreeting() {
const m = await getMessages();
return (
<p>
{m(encodedGreeting)}
</p>
);
}注意:“Alice”将根据用户的首选语言进行翻译。
使用变量
你可以在编码字符串中覆盖变量。
import { msg, getMessages } from 'gt-next/server';
const encodedGreeting = msg('你好,{name}!', { name: 'Alice' });
export default async function TranslateGreeting() {
const m = await getMessages();
return (
<p>
{m(encodedGreeting, { name: 'Bob' })}
</p>
);
}Note: 这将显示 "Hello, Bob!" —— 该变量会在渲染时被覆盖。
使用 ICU 消息格式
gt-next 支持 ICU 消息格式,可用于格式化变量。
import { msg, getMessages } from 'gt-next/server';
const encodedMessage = msg('购物车中有 {count, plural, =0 {没有商品} =1 {1 件商品} other {{count} 件商品}}', { count: 10 });
export default async function TranslateGreeting() {
const m = await getMessages();
return (
<p>
{m(encodedMessage)}
</p>
);
}ICU 消息格式是一种强大的变量格式化方式。 了解更多,请参见ICU 消息格式文档。
注意事项
getMessages函数是一个 server-side 函数,用于从msg中翻译 encoded string。- 使用
getMessages的翻译会在运行时之前的构建阶段完成(开发环境除外)。
后续步骤
- 请参阅
useMessages,用于在构建时从编码字符串进行客户端字符串翻译。 - 请参阅
msg以对字符串进行编码以便翻译。 - 如需运行时翻译,请参阅
tx和<Tx>。
本指南如何?