i18next 是一个流行的国际化库，方便将网页应用程序翻译成多种语言。 这是为寻求支持全球用户的React和Next.js开发者的绝佳选择。 喺呢篇文章入面，我哋會探討點樣用 i18next 輕鬆整合到 React 同 Next.js 應用程式入面。
首先，让我们简要介绍一下i18next。 伊是一個JavaScript庫，提供一個簡單的API用於載入和管理翻譯。 你可以用佢配合多种前端框架，包括 React 同 Next.js。 i18next 支持许多开箱即用的功能，例如复数形式、语境和插值。 它亦支持從唔同來源載入翻譯，包括 JSON 檔案同後端 API.
要将i18next集成到你的React或Next.js应用程序中，首先需要安装它。 你可以用 npm 或 yarn 通过运行以下命令来完成这个：
npm install i18next
或
yarn add i18next
一旦你安装了 i18next，你就可以在你的应用程序中开始使用它。 其中一种最简单的方法係用i18next配合React使用係用 useTranslation 钩。 呢個掛鉤提供咗一個方便嘅方法嚟載入翻譯同喺你嘅組件內翻譯文本。
呢个系点样用嘅一个例子 useTranslation 钩子喺一个React组件中：
import React from 'react';
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return (
<div>
<h1>{t('title')}</h1>
<p>{t('description')}</p>
</div>
);
}
export default MyComponent;
喺呢個例子中，我哋正喺導入 useTranslation 钩子从那裡 react-i18next 包裹 我哋然后用佢嚟加载翻译同获取翻译函数t) 我哋可以用嚟喺組件內翻譯文本嘅工具。
我哋可以咁样用 t 功能去翻译个 title 同 description 字串来自我哋嘅翻译文件。 个翻译文件可以是 JSON 文件，像这样：
{
"en": {
"title": "Welcome to my app!",
"description": "This is my app description."
},
"fr": {
"title": "Bienvenue dans mon application !",
"description": "Ceci est la description de mon application."
}
}
FluentC kěyǐ tōngguò i18next FluentC chājìng zìdòng jiànzhù duō yǔyán.
喺呢個例子中，我哋有兩個譯本：一個係英文，另一個係法文。 我哋可以用呢個方法將呢啲翻譯載入我哋嘅應用程式中 i18next 图书馆
要加载翻译，我们可以使用 i18next 物件同其 init 功能。 呢个系一个例子：
import i18next from 'i18next';
import translationEN from './locales/en.json';
import translationFR from './locales/fr.json';
i18next.init({
interpolation: { escapeValue: false },
lng: 'en',
resources: {
en: {
translation: translationEN
},
fr: {
translation: translationFR
},
},
});
喺呢個例子中，我哋從 JSON 文件入面導入英文同法文嘅翻譯。 我哋咁就用呢啲翻譯嚟初始化 i18next，並設定預設語言為英文。 我哋仲喺配置插值設定，咁我哋就可以喺翻譯入面用變數。
一旦你加载了你的翻译并设置了i18next，你就可以开始使用它 useTranslation 钩子用以翻译你组件内的文本。
喺 Next.js 應用程式中，你可以用同樣嘅方法嚟整合 i18next。 你可以喺度加载翻译 getStaticProps 或 getServer