利用 i18next 進行基於 React 的國際化

國際化 (i18n) 對於擴展軟體在全球市場的影響至關重要。 在 JavaScript 生態系統中，i18next 是最有效的工具之一。 本文探討 i18next，特別是其與 React 的整合，並強調其優勢、與各種框架的相容性以及增強本地化工作的技巧。

什麼是 i18next？

i18next 是一個強大的國際化框架，適用於 JavaScript 應用程式。它簡化了為網頁、行動裝置和桌面應用程式添加多語言支援的過程。該框架允許動態翻譯管理，使應用程式更容易適應不同的語言和地區。

i18next 的優點

• 輕鬆整合

i18next 容易整合到現有專案中，並支援熱門的 JavaScript 框架，例如 React、Angular 和 Vue。這種多功能性使其成為開發人員的首選。

• 客製化和靈活性

i18next 提供模組化的結構，允許開發人員只使用他們需要的功能。這種高度的客製化確保框架可以滿足各種專案需求。

• 動態載入翻譯

該框架支援動態載入翻譯，通過按需獲取必要的語言資源來優化效能。

• 複數和語境化

i18next 內建支援處理複數和語境化，確保根據數量或語境準確地呈現語言變化。

• 支援各種檔案格式

它支援多種檔案格式儲存翻譯，包括 JSON 和 YAML，讓您靈活選擇最符合專案需求的格式。

• 豐富的生態系統

蓬勃發展的社群和豐富的生態系統提供外掛程式、擴充功能和支援，以增強和擴展 i18next 的功能，節省開發時間和精力。

• 多種後端選項

i18next 支援各種後端用於儲存和擷取翻譯，例如記憶體內、HTTP 和自訂後端，使您可以整合不同的儲存解決方案。

• 主動開發和維護

定期更新和改進使 i18next 始終與網路開發的最佳實務和不斷變化的需求保持一致。

React-i18next 整合

i18next 最受歡迎的整合之一是透過 react-i18next 綁定與 React 整合。這種組合允許在 React 元件中有效地進行國際化，促進動態語言切換和無縫的翻譯管理。

在您的 React 應用程式（nextjs）中設定 i18next，方法是設定 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': 'English',
  },
}

// 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
      -'如果有其他檔案'.json
    -de
      -translation.json
      -'如果有其他檔案'.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>
          <您的元件/>
        </div>
    )
}

然後在您的元件中

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

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation 是預設命名空間

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

export default MyComponent;