在 React 應用程式中建立國際化：可擴展本地化綜合指南

介紹

在過去的三個月裡，我一直在獨自研究一個大型 SaaS 想法。雖然這是一次令人興奮的旅程，但挑戰也是巨大的。在過去的兩周里，在保持品質的同時交付高優先級用例一直是我的首要任務。

我面臨的關鍵決定之一是是否整合國際化（i18n）以支援多種語言。最初，我傾向於推出純英文版本，以便將來利用法學碩士進行翻譯。然而，作為一個單人團隊，我現在選擇專注於一個利潤豐厚的市場。

雖然對我的專案來說是可選的，但由於法律和監管要求，國際化在專業環境中至關重要。本部落格探討如何設計可擴展且高效的 i18n 架構，避免高複雜性或結構不良等陷阱，這些見解可以讓獨立開發人員和團隊受益。

由於我決定不在我的專案中實現 i18n，我分享本指南來幫助其他人（以及未來的我！）。

---

目標

一個好的國際化系統應該：

• 可擴充性： 支援跨團隊無縫協作以進行翻譯和語言更新。
• 模組化： 保持簡單的結構，無需開銷即可輕鬆擴展。
• 可預測性：遵循一致、可執行的在地化模式。
• 初學者友善：可供不同技能等級的開發人員使用。

---

可用工具

對於 JavaScript 的國際化，以下是一些流行的工具：

• i18next： 一個成熟、功能豐富的函式庫，非常適合可擴展的專業級在地化。
• 替代方案： FormatJS、Polyglot.js、LinguiJS、GlobalizeJS、Mozilla 的 Fluent。

每種工具都有其優點和缺點。為簡單起見，本指南重點在於 i18next。

---

設計架構

國際化資料夾結構

架構以 i18n 資料夾為中心，其中包含三個關鍵元件：

1. 翻譯資料夾： 儲存每種語言的 JSON 檔案（例如 en.json、ar.json、ch.json）以及新語言的 base.json 範本。

2. index.js: 設定和初始化 i18n 函式庫（例如 i18next），設定後備語言和其他選項。

3. keys.js:定義翻譯鍵的集中式結構，確保一致性並避免重複。

資料夾結構範例：

src/
├── i18n/
│   ├── translations/
│   │   ├── en.json       # English translations
│   │   ├── ar.json       # Arabic translations
│   │   ├── ch.json       # Chinese translations
│   │   └── base.json     # Template for new languages
│   ├── index.js          # i18n configuration
│   └── keys.js           # Centralized keys for consistency

---

keys.js 作為中心樞紐

keys.js 檔案反映了專案的結構，按功能或模組對鍵進行分組。這種結構使密鑰管理變得直觀且可擴展。

範例keys.js：

const keys = {
  components: {
    featureA: {
      buttonText: "components.featureA.buttonText",
      label: "components.featureA.label",
    },
    featureB: {
      header: "components.featureB.header",
    },
  },
};

export default keys;

---

翻譯文件

翻譯JSON檔案與keys.js中的結構保持一致，確保一致性。

範例 en.json：

{
  "components": {
    "featureA": {
      "buttonText": "Submit",
      "label": "Enter your name"
    },
    "featureB": {
      "header": "Welcome to Feature B"
    }
  }
}

範例 ar.json：

{
  "components": {
    "featureA": {
      "buttonText": "إرسال",
      "label": "أدخل اسمك"
    },
    "featureB": {
      "header": "مرحبًا بكم في الميزة ب"
    }
  }
}

---

設定 i18next

安裝 i18next 及其 React 整合：

npm install i18next react-i18next

i18n/index.js：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import en from "./translations/en.json";
import ar from "./translations/ar.json";

i18n.use(initReactI18next).init({
  resources: { en: { translation: en }, ar: { translation: ar } },
  lng: "en", // Default language
  fallbackLng: "en",
  interpolation: { escapeValue: false }, // React handles escaping
});

export default i18n;

---

將 i18n 整合到組件中

範例組件（功能 A）：

import React from "react";
import { useTranslation } from "react-i18next";
import keys from "../../i18n/keys";

const FeatureA = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>Feature A</h2>
      <button>{t(keys.components.featureA.buttonText)}</button>
      <label>{t(keys.components.featureA.label)}</label>
    </div>
  );
};

export default FeatureA;

---

新增語言切換器

語言切換器允許使用者在語言之間切換。

LanguageSwitcher.jsx：

import React from "react";
import { useTranslation } from "react-i18next";

const LanguageSwitcher = () => {
  const { i18n } = useTranslation();

  const changeLanguage = (lang) => {
    i18n.changeLanguage(lang);
  };

  return (
    <div>
      <button onClick={() => changeLanguage("en")}>English</button>
      <button onClick={() => changeLanguage("ar")}>العربية</button>
    </div>
  );
};

export default LanguageSwitcher;

---

最終資料夾結構

src/
├── components/
│   ├── featureA/
│   │   ├── index.jsx
│   │   └── featureAStyles.css
│   └── shared/
│       └── LanguageSwitcher.jsx
├── i18n/
│   ├── translations/
│   │   ├── en.json
│   │   ├── ar.json
│   │   └── base.json
│   ├── keys.js
│   └── index.js
├── App.jsx
├── index.js

---

超越

1. 利用人工智慧進行翻譯：使用法學碩士進行快速翻譯。例如提示：
   
   「將以下 JSON 翻譯為中文：{en.json 的內容}。」

2. 後端驅動的翻譯： 將翻譯集中在後端，無需部署程式碼即可實現動態更新。選項包括 GitOps 或專用後端服務。

---

示範

沙盒：https://codesandbox.io/p/sandbox/785hpz

---

結論

國際化是在全球擴展應用程式的關鍵一步。透過遵循本指南，您將擁有一個可擴展、模組化且適合初學者的架構，支援單獨專案或大型團隊的無縫本地化。

編碼愉快！

— Ahmed R. Aldhafeeri

以上是在 React 應用程式中建立國際化：可擴展本地化綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！