React 多國語言與 i18n 實作教學 使用 react-intl 輕鬆打造國際化網站

如何在 React 中實作高品質的多國語言支援？

實作 網頁國際化 (i18n) 的核心在於建立一套「可擴展」的語系管理系統。React 多國語言教學 的最佳實踐路徑包含：1. IntlProvider 配置：在專案根目錄注入語系狀態與翻譯 JSON 檔；2. FormattedMessage 應用：利用聲明式元件處理 JSX 中的靜態文字；3. injectIntl 高階元件：在 Placeholder 或 JavaScript 邏輯中透過 API 取得翻譯字串；4. 動態切換機制：設計狀態驅動的 React 切換語言 流程。透過高品質的 react-intl 範例 與標準化 React i18n 實作，開發者能確保日期、貨幣與數字格式自動對齊當地習慣，大幅提升全球化產品的使用者體驗與專業度。

在開發全球化產品時，網頁國際化 (i18n) 是不可或缺的一環。React 多國語言教學 的首選方案通常是 react-intl，這套函式庫由 Yahoo 維護，能讓我們以元件化的方式處理不同語系的字串、日期、數字與貨幣轉換。

本文將透過實戰 react-intl 範例，帶你掌握如何在 React 中優雅地實作多語系支持。

為什麼選擇 react-intl 進行 React i18n 實作？

react-intl 提供了一套成熟且符合標準的解決方案，其主要功能包括：

• 格式化支援：支援數字千分位、貨幣符號、以及複雜的日期與時間格式。
• 相對時間：能自動計算並顯示「3 分鐘前」等語法。
• 強大相容性：支援超過 150 種語言，且在瀏覽器與 Node.js (SSR) 環境皆可運行。

基本環境配置與 IntlProvider

要開始 React i18n 實作，最重要的第一步是安裝 react-intl：
npm install --save react-intl

接著，我們需要在專案的最外層使用 IntlProvider 注入環境設定。你需要提供 locale (當前語系程式碼) 以及 messages (對應的翻譯 JSON 檔)。

1
2
3
4
5
6
7

import { IntlProvider, addLocaleData } from "react-intl";
import zh from "react-intl/locale-data/zh"; // 引入繁中配置

// 透過 IntlProvider 注入多國語言環境
<IntlProvider locale={this.state.locale} messages={this.state.messages}>
  <App />
</IntlProvider>

如何在元件中使用翻譯字串？

1. 使用 FormattedMessage 元件

這是最常見的用法，適合直接渲染在 JSX 中的文字。

1

<FormattedMessage id="App.welcome" defaultMessage="歡迎光臨" />

2. 在程式邏輯或 Placeholder 中使用

當你需要將翻譯字串作為變數（例如 input 的 placeholder）時，可以透過 injectIntl() 這個高階元件 (HOC) 注入 intl 物件。

1
2
3
4
5

const SearchBar = ({ intl }) => {
  const placeholderText = intl.formatMessage({ id: "App.searchPlaceholder" });
  return <input placeholder={placeholderText} />;
};
export default injectIntl(SearchBar);

實戰技巧：React 切換語言機制的設計

我強烈建議在專案一開始就規劃好多語系架構。你可以設計一個 HotSwappingIntlProvider 元件，透過改變 State 來觸發全站的語言切換，這在 React 多國語言教學 中是常見的進階應用。

1
2
3
4
5
6
7
8

// 動態切換語言的範例邏輯
handleChange(newLocale) {
  const newMessages = (newLocale === 'en') ? enJson : zhJson;
  this.setState({
    locale: newLocale,
    messages: newMessages,
  });
}

FAQ：React 多國語言開發常見問題

Q1：react-intl 與 react-i18next 兩者該如何選擇？

A：react-intl 更強調遵循標準的瀏覽器 Intl API，適合追求純粹元件化與標準化格式的專案。而 react-i18next 則提供了更豐富的 Hook 支援與靈活的 Namespace 管理，適合需要處理超大規模（上萬筆）翻譯項目的應用。在進行 React i18n 實作 選型時，若您追求輕量與標準，react-intl 是極佳選擇。

Q2：當翻譯檔案變得很巨大時，該如何有效管理？

A：高品質的 多語系專案架構 建議將翻譯檔按「模組 (Module)」或「頁面 (Page)」拆分。不要維護一個數千行的單一 JSON。您可以利用腳本在編譯期將多個小 JSON 合併，或者使用線上協作工具（如 POEditor, Lokalise）讓翻譯人員與開發者共用同一套 Key 值系統，減少命名衝突。

Q3：如何實作動態載入（Lazy Load）語系檔以優化效能？

A：如果您的應用支援 10 種語言，一次載入所有 JSON 會增加 Bundle Size。您可以結合 Webpack 的動態 Import 功能，在使用者切換語言時才從伺服器請求對應的 zh.json 或 en.json。這在大型 網頁國際化 專案中是優化載入效能的關鍵手段。

結語：讓你的 React 專案走向國際

掌握了 react-intl 範例 中的配置與實作技巧後，你就能輕鬆應對各種複雜的國際化需求。記住，良好的 網頁國際化 不僅是文字翻譯，更包含日期格式、貨幣顯示等在地化細節。

透過系統化的 React 多國語言教學 實踐，你的專案將具備更高的專業度與市場競爭力！

• ← 上一篇
• 下一篇 →