概述
General Translation 的 Next.js SDK 概述
介绍
General Translation 的 Next.js SDK 是面向 Next.js 应用的开源国际化（i18n）库。
它提供了一套完善的工具集，帮助你以简单、易维护的方式为 Next.js 应用实现国际化，并与其他主流 i18n 库保持功能等价。该 SDK 构建于 React SDK 之上，并提供了额外的 Next.js 专属能力。
该 SDK 可在不依赖 General Translation 平台的情况下独立使用，行为与其他 i18n 库相近。
同时，它也可与我们的平台集成以获得增强功能：
- 开发环境中的翻译热重载
- 自动化 AI 翻译
- 与 General Translation 平台的翻译同步
- 与我们的翻译 CDN 的原生集成
- 在生产环境（服务端）对 React 组件进行按需翻译
概念
理解该 SDK 需要掌握 6 个核心概念。
使用 withGTConfig 初始化
withGTConfig 函数用于在你的 Next.js 应用中初始化 SDK。
将其添加到 next.config.[js|ts] 文件中以配置 SDK：
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// 您的 next.config.ts 选项
};
export default withGTConfig(nextConfig, {
// 您的 GT 配置
});有关更多信息，请参阅 withGTConfig API 参考。
<GTProvider> 组件
<GTProvider> 组件为应用提供翻译上下文，包括当前语言和相关译文。
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
<html>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
);
}重要： 该 provider 应当包裹整个应用，并尽可能放在组件树的最上层，例如根布局中。
该 provider 仅用于客户端特性。仅在服务端运行的应用不需要它，但仍可包含。
参见 GTProvider 的 API 参考 以了解更多信息。
<T> 组件
<T> 组件是应用内内容本地化的推荐方式。
它是一个 React 组件，可用于包裹任意 JSX 元素，并会自动将该元素的内容渲染为受支持的语言。
示例
<T>
<div>你好，世界！</div>
</T><T>
<div>
<h1> 这里有一张图片 </h1>
<img src="https://example.com/image.png" alt="示例" />
</div>
</T><T>
使用 `<T>` 组件可以轻松完成格式化。
<Num>{1000}</Num>
<DateTime>{new Date()}</DateTime>
<Currency currency="USD">{1000}</Currency>
</T><T> 组件可与变量组件（如 <Num>、<DateTime> 和 <Currency>）配合使用，用于格式化动态内容。
useGT 钩子
useGT 是一个 React 钩子，使用方式与 <T> 组件相似，但各有取舍。
该钩子会返回一个用于翻译字符串的函数。
const t = useGT();
t('你好，世界！');与 <T> 组件相比，useGT 钩子在代码中提供了更高的灵活性。
例如，如果你有一个包含嵌套字符串的复杂数据结构，使用 <T> 组件会更不便。
const t = useGT();
const data = {
title: t('你好，世界！'),
description: t('这是一个描述'),
};msg 函数
msg 函数用于标记需要翻译的字符串，这些字符串可能在多个组件中复用，或存放在配置对象中。
这对共享内容（如导航标签、表单提示，或在应用中多处出现的文本）尤其有用。
// 标记字符串以进行翻译
import { msg } from 'gt-next';
const navItems = [
{ label: msg('首页'), href: '/' },
{ label: msg('关于'), href: '/about' },
{ label: msg('联系我们'), href: '/contact' }
];// 解码并使用标记的字符串
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
<nav>
{navItems.map(item => (
<a key={item.href} href={item.href}>
{m(item.label)}
</a>
))}
</nav>
);
}msg 函数会将字符串与翻译元数据一起编码，useMessages（服务端组件使用 getMessages）则负责解码。
请参阅 shared strings 指南，了解关于 msg 函数的更多信息。
useTranslations 钩子
useTranslations 是一个 React 钩子，返回一个函数，用于按给定键获取对应的翻译。
const dictionary = {
hello: {
world: '你好，世界！',
},
};const translate = useTranslations();
translate('hello.world');这种行为与其他翻译库类似，例如 react-i18next 和 next-intl。
我们不建议在你的应用中使用 useTranslations hook。频繁使用 useTranslations hook 会让代码库更难维护，
并积累大量技术债务。
如果你正在从其他 i18n 库迁移，useTranslations hook 可以直接替换使用，有助于逐步迁移你的代码库。
请参阅 dictionaries 指南，了解更多关于 useTranslations hook 的信息。
更多信息请参见 useTranslations API 参考。
后续步骤
这份指南怎么样？