Currency Converter

使用 <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;

就这样!你现在可以开始为你的应用做翻译了!

本指南如何?