迁移到 gt-next

概述

本指南将引导您使用 gt-next 作为独立的 i18n 库来国际化您现有的 Next.js 应用程序。本指南也可以帮助您从其他 i18n 库迁移到 gt-next。

所有翻译都存储在您项目的代码库中，并由您管理。此外，您需要提供自己的翻译。这意味着您不需要添加 API 密钥。

如果您想为您的 JSON 文件自动生成翻译，请参考 CLI 工具。

工作原理

翻译可以存放在称为"字典"的 JSON 文件中（en.json、fr.json 等）。键用作引用，值是翻译后的内容：

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

然后在您的应用程序中使用 useDict() 钩子和 getDict() 函数引用翻译：

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // 客户端
  const d = await getDict(); // 服务器端
  return (
    <div>
      <h1>{d('greeting')}</h1>
    </div>
  );
}

注意： 由于这些翻译由您管理，您需要在应用程序发展时手动更新它们。这意味着每次添加或更改内容时，您都需要更新翻译文件。

如果您有兴趣自动化此过程，请考虑使用 CLI 工具。

设置

1. 启用翻译

使用 withGTConfig() 插件来设置你的 Next.js 应用的 i18n 行为。

next.config.js

import { withGTConfig } from 'gt-next';
 
const nextConfig = {
  // Your Next.js config
};
 
export default withGTConfig(nextConfig, {
  locales: ['en', 'fr'], // Supported locales (English, French)
});

2. 添加字典加载器文件

这个 loadDictionary() 负责加载你的翻译。所有翻译都存储在称为字典的嵌套 JSON 文件中。

在这里，我们指定我们的翻译文件存储在 /public/dictionaries/ 目录中。

src/loadDictionary.js

export default async function loadDictionary(locale) {
  const t = await import(`../public/dictionaries/${locale}.json`);
  return t.default;
}

3. 用 `<GTProvider>` 包装你的应用

用 <GTProvider> 包装你的应用以启用翻译上下文。这允许你在客户端组件中访问翻译。

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

4. 创建你的翻译文件

你的翻译文件应该存储在 ./public/dictionaries 目录中。每个文件应该以它所代表的语言环境命名，例如 en.json、fr.json 等。

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

然后添加相应的法语字典翻译文件：

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

5. 使用你的翻译！

你现在可以使用 useDict() 和 getDict() 访问你的翻译。

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // client-side
  const d = await getDict(); // server-side
  return (
    <div>
     {/* en: "Hello, World!"  fr: "Bonjour, le monde!" */}
      <h1>{d('greeting')}</h1> // [!code highlight]
    </div>
  );
}

提示： 有关字典语法的更多信息，例如插入变量，请参阅字典参考。

兼容性

本指南帮助您从其他i18n库迁移到gt-next。字典格式通常与其他库兼容。

我们的字典支持变量、日期和数字插值。有关更多信息，请参阅字典选项。

但是，如果您的项目使用复杂语法，如复数或分支，您需要将这些转换为gt-next语法。

有关gt-next语法的更多信息，请参阅分支组件页面。

注意事项

使用 gt-next 手动管理项目中的翻译。
翻译存储在称为“字典”的 JSON 文件中（en.json，fr.json，等）。
使用 useDict() 和 getDict() 来访问您的翻译。

下一步

有关字典语法的更多信息，请参阅字典参考。
如果您有兴趣自动化翻译过程，请考虑使用翻译命令。

迁移到 gt-next

在本页面