2025 OEM 網站開發筆記 [15] - 導入多語系 react-i18n 升級成國際化網站

# 下載套件

npm install react-i18next i18next --save

# 建立語言包

在 /frontend/src/utils 目錄下建立locales語言包資料夾以及 i18n.ts，並在資料夾內建立語言檔案

按照官方 Doc 提供的範例 貼上

// /frontend/src/utils/i18n.ts
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them,
// or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
const resources = {
 en: {
  translation: {
   "Welcome to React": "Welcome to React and react-i18next",
  },
 },
 fr: {
  translation: {
   "Welcome to React": "Bienvenue à React et react-i18next",
  },
 },
};

i18n
 .use(initReactI18next) // passes i18n down to react-i18next
 .init({
  resources,
  lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
  // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
  // if you're using a language detector, do not define the lng option

  interpolation: {
   escapeValue: false, // react already safes from xss
  },
 });

export default i18n;

並在 main.tsx 引入，畢竟是要涵蓋整個專案的功能

import '@/utils/i18n'

createRoot(document.getElementById('root')!).render(
...
)

# 簡單測試功能

將預設的法文 fr 改成中文 cn，並在 locales 資料夾下建立 en 以及 ch 資料夾，然後新增 en.json 及 cn.json，未來要新增翻譯內容都直接在 json 中編輯就好，不需要到 i18n.ts 中修改

英文的內容大致如下：

{
 "welcomeMessage": "Welcome to React and react-i18next"
}

中文：

{
 "welcomeMessage": "歡迎使用 React 和 react-i18next"
}

然後就可以將 i18n.ts resources 的 translation 改成使用自己寫的語言包

import enLang from "./locales/en/en.json";
import chLang from "./locales/ch/ch.json";

...
const resources = {
 en: {
  translation: enLang,
 },
 ch: {
  translation: chLang,
 },
};

i18n
 .use(initReactI18next) // passes i18n down to react-i18next
 .init({
  resources,
        fallbackLng: "ch", // 如果找不到對應的語言，就使用這個語言
  lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
  // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
  // if you're using a language detector, do not define the lng option

  interpolation: {
   escapeValue: false, // react already safes from xss
  },
 });

export default i18n;

# 前端使用方法

這邊在最顯眼的 Navbar 測試，i18n 有提供 i18n.changeLanguage 方法，可直接調用來切換語言，這邊簡單寫了一個下拉元件 LanguageSwitcher，並在 DesktopNavbar 中使用，那這邊只講重點如何使用 i18n，LanguageSwitcher 元件內容就不多做說明

i18n，使用方法就是先用 useTranslation hook，然後在需要的地方使用 t 方法，傳入語言包的 key 就可以取得對應的語言

import { useTranslation } from "react-i18next";
import LanguageSwitcher from "@/components/language-switcher";

const DesktopNavbar: React.FC = () => {
 const { t } = useTranslation();
 return (
  <nav className='hidden md:flex mx-8'>
   <NavigationMenu>
    {/* 測試 i18n 用 */}
    <div>{t("welcomeMessage")}</div>
    ...
   </NavigationMenu>

   {/* 右側語言切換器 */}
   <div className='flex items-center'>
    <LanguageSwitcher />
   </div>
  </nav>
 );
};

# 成果

唯一比較麻煩的就是語言包必須手打，若有 5 國語言就必須手動翻譯 5 種不同的語言，是缺點也同時是優點，好處就是網站內容會更專業、精準，而不是單純機翻，壞處就是需要花更多時間精力翻譯

其他像是複數處理、<Trans> 元件的用法等等，可以去看官方文件或網路教學