【React i18n 實戰 1】專案中實現多語系功能

在現代 Web 應用中，多語系 (i18n, internationalization) 幾乎是必備功能，甚至在面試時也曾經被問過相關問題(汗)。本篇文章記錄了我如何在 React 專案中使用 i18next 實現網站的多語系功能，如果有興趣歡迎往下看~

多語系是什麼

多語系（Internationalization, i18n）指的是讓應用程式能夠根據不同語言與地區，顯示對應的內容。常見做法是將文字抽離成翻譯檔，透過 key 對應不同語言的內容，並在畫面上動態切換。

安裝套件

想在 react 專案中實現多語系，我們需要安裝的套件有三個：

i18next：多語系的 labrary
react-i18next：i17next 的 react 擴充，提供 Hook 方便在元件中使用
i18next-browser-languagedetector：用來自動偵測瀏覽器語言的插件

npm install i18next react-i18next i18next-browser-languagedetector

多語系實現步驟

我把實作需要做的事情歸納為以下三個步驟：

建立語言檔案
初始化 i18next 設定檔
在元件中使用翻譯

1. 建立語言檔案

為了讓網站依照語言顯示不同文字，首要做的事情當然就是先準備好不同語言的內文檔案。假設我們要支援繁體中文與英文兩個語言，可以將不同語言的檔案依照語言放在不同的資料夾內。

我的檔案結構長這樣：

locales/
 ├── en/
 │    └── translation.json
 └── zh/
      └── translation.json

多語系的設計是用 key-value 的方式呈現，翻譯檔本質就是用 key 當索引去對應不同語言的內文，因此翻譯檔的 key 必須保持一樣，所以內文看起來會是：

英文(en/translation.json)：

{
	"welcome": "Welcome to my blog", 
	"description": "This is a React i18n example"
}

繁體中文(zh/translation.json)：

{
	"welcome": "歡迎來到我的部落格", 
	"description": "這是一個 React 多語系範例"
}

2. 初始化 i18next

建立好不同語言的翻譯檔後，我們要在專案中建立建立 i18n.js，這是實現語言切換的關鍵。

先在 i18n.js 中引入需要的套件：

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

也要記得引入語言檔：

import en from "./locales/en/translation.json";
import zh from "./locales/zh/translation.json";

設定 i18next：

i18n
	// 偵測瀏覽器語言
  .use(LanguageDetector) 
  // 將 i18next 與 react 綁定，讓開發者可以在元件中使用 useTranslation
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      zh: { translation: zh },
    },
    // 預設語言，如果偵測不到使用者語言或是沒有對應的翻譯時，會使用這個語言
    fallbackLng: "en",
    // 是否需要做 html escape
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

3. 在 React 中使用

翻譯檔與設定檔都完成後，只要在最外層的 .jsx 引入(可能是 main.jsx 或 index.jsx )，被包住的元件都可以套用翻譯效果。

import "./i18n";

在元件中使用翻譯檔：

import { useTranslation } from "react-i18next";

function Home() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
    </div>
  );
}

export default Home;

const { t } = useTranslation();

useTranslation() 是由 i18next 提供的 Hook，用來從系統中取得語言狀態與提供翻譯工具
t 是解構出的翻譯函式

{t("welcome")}

幫我們找出翻譯檔中，key welcome 對應的內容。

但是，我們的翻譯檔有兩個語言，現在系統會抓到哪個檔案? 當我們什麼語言都沒有設定的話，系統會去找前面設定檔中設定的 fallbackLng 的對應語言，在這個例子中就是 fallbackLng: "en"。

語言切換功能

如果想要切換語言的話，要用到另外一個工具：

const { i18n } = useTranslation();

i18n 用來切換語言，用法如下：

i18n.changeLanguage("en")

完整程式碼：

import { useTranslation } from "react-i18next";

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

  return (
    <div>
      <button onClick={() => i18n.changeLanguage("en")}>
        English
      </button>
      <button onClick={() => i18n.changeLanguage("zh")}>
        中文
      </button>
    </div>
  );
}
export default LanguageSwitcher;

有了這段程式碼，我們就可以透過按鈕來切換想要使用的語言。

總結

今天的文章分享了什麼是多語系、如何在 React 專案中快速利用 i18next 實現用按鈕切換語言。

今天的內容都是非常基本的用法，目前這種靜態的寫法會把所有語言包都打包進 JS 中，如果你的網站有 10 國語言，檔案會變得很重，可能會影響首頁載入速度。

之後除了介紹 URL 同步，我也會分享如何透過動態載入（Lazy Loading）來優化效能!