字符串翻译
如何进行字符串翻译
概览
本指南将逐步演示如何在 Next.js 应用中使用
useGT、getGT 和 tx 来翻译字符串。
前置条件
我们假设你已在项目中安装了 gt-next，并已阅读或正按照快速入门指南进行操作。
翻译文本字符串
客户端组件
对任意客户端字符串，请使用 useGT。
请注意，必须在 <GTProvider> 的子组件中调用 useGT。
import { useGT } from 'gt-next';
export default function MyComponent() {
const t = useGT();
return (
<div>
<h1>{t('这是一段将被翻译的文本字符串')}</h1> // [!code highlight]
</div>
);
}服务端组件
处理任何服务端字符串时，请使用 getGT。
import { getGT } from 'gt-next/server';
export default async function Home() {
const t = await getGT();
return (
<div>
<h1>{t('这是一条会被翻译的字符串')}</h1> // [!code highlight]
</div>
);
}注意：
在开发环境中，如果你在运行时进行内容翻译，你需要刷新页面才能看到由 getGT 返回的字符串的译文。
生产环境不会出现这种情况。
添加变量
变量是可能变化的值，但不会被翻译。 要将变量添加到字符串中，请使用以下模式：
import { useGT } from 'gt-next';
export default function MyComponent() {
const t = useGT();
return (
<div>
<h1>{t('你好，{username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
</div>
);
}动态内容
假设你有一个会变化的字符串。
你可以使用 tx 函数在运行时对该字符串进行翻译。
import { tx } from 'gt-next/server';
export default async function MyComponent({ username }) {
const translation = await tx(`你好,${username}。你今天过得怎么样?`);
return (
<div>
<h1>{translation}</h1> // [!code highlight]
</div>
);
}注意事项
- 要翻译字符串，请使用
useGT、getGT和tx。 useGT和getGT会在部署前完成翻译，而tx会在运行时翻译。请谨慎使用tx。- 可使用
{ variables: { key: value } }模式向字符串中注入变量。
后续步骤
本指南如何?