利用 i18next 进行基于 React 的国际化

国际化 (i18n) 对于扩展软件在全球市场的覆盖范围至关重要。i18next 是 JavaScript 生态系统中最有效的工具之一，可以实现此目的。本文探讨了 i18next，尤其是它与 React 的集成，并着重介绍了它的优势、与各种框架的兼容性以及增强本地化工作的技巧。

什么是 i18next？

i18next 是一个强大的 JavaScript 应用程序国际化框架。它简化了为 Web、移动和桌面应用程序添加多语言支持的过程。该框架允许动态的翻译管理，使应用程序更容易适应不同的语言和地区。

i18next 的优势

• 易于集成

i18next 能够轻松集成到现有的项目中，并支持流行的 JavaScript 框架，例如 React、Angular 和 Vue。这种多功能性使其成为开发人员的首选。

• 自定义和灵活性

i18next 采用模块化结构，允许开发人员仅使用他们需要的功能。这种高度的自定义确保框架能够满足各种项目需求。

• 动态加载翻译

该框架支持动态加载翻译，通过按需获取必要的语言资源来优化性能。

• 复数和语境化

i18next 内置支持处理复数和语境化，确保根据数量或语境提供准确的语言变化。

• 支持各种文件格式

它支持多种用于存储翻译的文件格式，包括 JSON 和 YAML，允许灵活地选择最符合项目需求的格式。

• 完善的生态系统

一个蓬勃发展的社区和完善的生态系统提供插件、扩展和支持，以增强和扩展 i18next 的功能，节省开发时间和精力。

• 多种后端选项

i18next 支持各种用于存储和检索翻译的后端，例如内存、HTTP 和自定义后端，可以使用户与不同的存储解决方案集成。

• 主动开发和维护

定期更新和改进使 i18next 能够紧跟网络开发中最佳实践和不断变化的需求。

React-i18next 集成

i18next 最受欢迎的集成之一是通过 react-i18next 绑定与 React 集成。这种组合允许在 React 组件中有效地进行国际化，便于动态语言切换和无缝的翻译管理。

通过设置 i18next 实例并使用必要的选项初始化它，在您的 React 应用程序（nextjs）中配置 i18next。

React-i18next 代码示例

以下是在 React 应用程序中设置和使用 react-i18next 的分步示例：

1. 安装依赖项

首先，安装 i18next、react-i18next 和 next-i18next 以从服务器加载翻译：

npm install i18next react-i18next next-i18next

2. 初始化 i18next

创建一个名为 next-i18next.config.js 的文件，用于配置和初始化 i18next：

// next-i18next.config.js
const path = require('path'); // 添加这行来定义 path
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // 在这里添加你的语言
    // localeDetection: false,  // 默认值为 true
  },
  localePath: path.resolve('./content/locales'),  // 这是你的 i18n 文件路径 
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': '英语',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // 添加这个 i18n 配置
};

3. 设置翻译文件

创建一个名为 locales 的目录，并在该目录下为每种语言（en、de 等）创建子目录。在每个子目录中，创建一个名为 translation.json 的文件：

示例：

-content
  -locales
    -en
      -translation.json
      -'other file if you have'.json
    -de
      -translation.json
      -'other file if you have'.json

locales/en/translation.json

{
  "welcome": "欢迎",
  "description": "这是一个示例描述。"
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. 使用 I18nextProvider 包装您的应用程序

在您的主文件（如 index.js、App.js 或 _app.tsx）中，使用 appWithTranslation 包装您的应用程序：

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // 这样包装

5. 在组件中使用翻译钩子

现在，您可以使用 useTranslation 钩子在您的组件中翻译字符串：

首先，您应该在页面级别的文件中使用 serverSideTranslations

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

然后在您的组件中

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // 翻译是这里的默认值

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // 使用不同的命名空间
    </div>
  );
};

export default MyComponent;