使用 <T> 组件

概述

终于到了翻译的时候了！一旦你设置好 <T> 组件，你就可以将你的应用翻译成任何你想要的语言！

实际上，这可以分为两个步骤：

添加 <GTProvider> 组件

添加 <T> 组件

添加 `<GTProvider>` 组件

让我们从在你的应用中添加 <GTProvider> 组件开始。好消息是，这只需要做一次。

src/app/layout.tsx

import { GTProvider } from 'gt-next'
...
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <GTProvider> // [!code highlight]
            {children}
        </GTProvider> // [!code highlight]
      </body>
    </html>
  );
}

为什么我们需要 <GTProvider> 组件？

<GTProvider> 负责将翻译内容从服务器传递到客户端。每当我们想在客户端渲染 <T> 组件时，都需要将其包裹在 <GTProvider> 中。

你可以在这里阅读更多关于 <GTProvider> 组件的信息。

添加 `<T>` 组件

你一直在等待的部分来了……

现在我们只需要在内容的顶部放一个 <T>，并在结尾加上一个闭合的 </T>。别忘了添加一个唯一的标识符字符串，作为翻译的 id。

src/app/page.tsx

import { T } from 'gt-next'
...
function Page() {
  ...

  return (
    <T id="currency-converter"> // [!code highlight]
      ...
    </T> 
  );
}

export default Page;

就是这样！你现在已经可以开始翻译你的应用了！

使用 <T> 组件

概述

添加 <GTProvider> 组件

添加 <T> 组件

在本页面

添加 `<GTProvider>` 组件

添加 `<T>` 组件