字符串翻译
如何翻译字符串
概览
本指南是一篇分步教程，讲解如何在你的 Next.js 应用中使用
useGT、getGT 和 tx 来翻译字符串。
先决条件
我们假设你已在项目中安装了 gt-next，并且已阅读或正在阅读快速开始指南。
翻译文本字符串
客户端组件
对于任何客户端侧的字符串，请使用 useGT。
请注意，useGT 必须在 <GTProvider> 的子组件内调用。
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(`Hello, ${username}. How is your day?`);
return (
<div>
<h1>{translation}</h1> // [!code highlight]
</div>
);
}注意
- 要翻译字符串，请使用
useGT、getGT和tx。 useGT和getGT会在部署前完成翻译，而tx则在运行时翻译。请谨慎使用tx。- 可以通过
{ variables: { key: value } }模式向字符串注入变量。
后续步骤
这份指南怎么样？