如何為應用程式或網站加入多種語言

要為應用程式加入多種語言，請把所有介面文字移到翻譯檔中（每種語言一個檔案），用 i18n 函式庫載入，並加入會記住選擇的語言切換器。若是希望在搜尋中被找到的公開頁面，請為每種語言設定獨立網址，例如 /fr/，並用 hreflang 標籤連結各版本。接著處理常被忽略的部分：日期、數字與貨幣、某些語言較長的文字、從右到左書寫的文字，以及存放在資料庫中的內容。

你會聽到的專有名詞

• 國際化（i18n）：先把程式碼準備好，讓它能支援任何語言，包括不寫死字串、依地區格式化、版面有彈性。「18」代表 i 和 n 之間的字母數量。
• 在地化（l10n）：為特定語言或市場調整應用程式，主要是翻譯，有時也包括貨幣、圖片和法律文字。
• 地區設定（Locale）：語言加上（選用的）地區，例如 en-GB 或 pt-BR。

一次做好 i18n，之後每新增一種語言，主要就只剩翻譯工作。

方案與取捨

對大多數應用程式來說，標準的 i18n 函式庫加上翻譯檔是合適的基礎。你可以用機器翻譯或 AI 翻譯產生初稿，然後請母語流利的人審閱客戶最常看到的內容。

多語言應用程式的各個部分

翻譯檔

程式碼不會直接寫 <h1>歡迎回來</h1>，而是寫 t('dashboard.welcome')，每個地區的檔案則存放對應的文字：

{
  "dashboard": {
    "welcome": "歡迎回來，{{name}}",
    "items_one": "{{count}} 個項目",
    "items_other": "{{count}} 個項目"
  }
}

變數請使用佔位符，不要拼接句子片段，因為不同語言的語序不同。另外請使用函式庫的複數規則：英文只有兩種形式（1 item、2 items），但有些語言有三種、四種或更多形式。

日期、數字與金額的格式

不要手動格式化這些內容。瀏覽器內建的 Intl API 可以依任何地區格式化：英文的 1,234.5 在德文中會是 1.234,5；日期在日、月順序之間切換；貨幣符號的位置也會改變。建議以 UTC 儲存日期，金額則以數字加上貨幣代碼儲存，只有在顯示時才進行格式化。

可伸縮的版面

翻譯後的文字通常比英文長，德文和芬蘭文的字詞尤其如此。請避免固定寬度的按鈕和被截斷的標籤，並用最長的語言進行測試。

從右到左的語言

阿拉伯文、希伯來文、波斯文和烏爾都文是從右到左書寫的。這些地區請在頁面上設定 dir="rtl"，並使用 CSS 邏輯屬性（例如用 margin-inline-start 取代 margin-left；在 Tailwind 中用 ms-4 取代 ml-4），讓版面自動鏡像。帶有方向意義的圖示（例如箭頭）也需要翻轉。

語言切換器與偵測

每一頁都應顯示語言切換器，並以各語言的母語名稱標示（「Deutsch」、「Français」、「العربية」），而不要用國旗，因為國旗代表的是國家，不是語言。首次造訪時可以偵測瀏覽器偏好的語言來建議一個版本，但訪客明確的選擇應優先，並且要記住。

網址與 SEO

若希望頁面出現在搜尋結果中，每種語言都需要獨立網址。截至 2026 年 9 月，Google 對多語言網站的指引如下：

• 每種語言使用獨立網址：子目錄（example.com/fr/）最簡單；子網域和國家網域也可以。網址參數（?lang=fr）則不建議。
• 不要只靠 Cookie 或瀏覽器設定切換語言；Google 的爬蟲可能永遠看不到其他版本。
• 不要依語言自動轉址；請改為在版本之間提供連結。
• 使用 hreflang 告訴 Google 哪些頁面彼此是翻譯版本。每個版本都必須列出自己和其他所有版本，否則標註可能會被忽略。另外為備用頁面加上 x-default。
• Google 是根據頁面可見的內容判斷語言，而不是 lang 或 hreflang，因此請翻譯整頁，而不只是選單。

每個版本仍應設定 <html lang="fr">：螢幕閱讀器會用它來選擇正確的發音，這也是無障礙的要求。

登入後的應用程式畫面不需要被索引，因此這些畫面可以把語言存放在使用者的個人資料中。若要讓公開頁面被爬取，請參閱 AI 建置網站的 SEO。

資料庫中的內容

介面文字存放在檔案中；產品名稱、部落格文章和分類等內容則存放在資料庫中。常見的兩種模式：

• 翻譯表：product_translations (product_id, locale, name, description)。結構清楚，也能擴展到許多語言。
• 每個欄位使用 JSON 欄：name: {"en": "...", "fr": "..."}。語言少時比較簡單。

請事先決定翻譯缺漏時怎麼處理，通常是退回預設語言，而不是顯示空白。

電子郵件與通知

請儲存每位使用者的語言，並用於電子郵件、通知和 PDF。應用程式翻譯完成後，很容易忘記歡迎信仍然是英文的。

有效的提示詞

用 react-i18next 加入國際化。把所有使用者看得到的字串移到 locales/en.json，使用有命名空間的鍵值，用插值和複數規則取代字串拼接，並用目前的地區設定以 Intl 格式化日期、數字和價格。先不要更改任何文字。

加入法文和德文。公開的行銷頁面使用 /fr/ 和 /de/ 網址前綴，英文放在根目錄；每一頁都加上 hreflang 連結（包括自我參照和 x-default），並為每一頁設定 html lang。加入語言切換器，以各語言的母語名稱顯示。登入後的頁面則把語言存在使用者的個人資料中。

加入支援從右到左的阿拉伯文：阿拉伯文設定 dir="rtl"，把左右邊界和內距改用邏輯屬性，鏡像有方向性的圖示，並確認表單和表格仍然正確閱讀。

逐步執行

1. 挑選第一個額外語言，依據實際需求，也就是你的訪客或客戶所在的地方。
2. 國際化程式碼：把字串移到檔案中，加入複數與 Intl 格式化。先只用英文發布，並確認沒有任何改變。
3. 決定公開頁面的網址結構，並加入 hreflang。
4. 翻譯：用機器或 AI 翻譯產生初稿，再請母語流利的人審閱。替譯者提供脈絡，例如「Book」在某個畫面是名詞，在另一個畫面則是動詞。
5. 翻譯資料庫內容並設定備用方案。
6. 在地化其他部分：電子郵件、錯誤訊息、法律頁面，以及圖片中的文字。
7. 在手機寬度下測試每種語言；若有需要，也測試從右到左的版面。
8. 建立流程，讓新功能隨附翻譯一起發布，而不是拖延數月。

常見錯誤

• 拼接句子（"You have " + n + " messages"），在其他語言中會出錯。
• 元件、錯誤訊息和驗證字串中留有寫死的文字。
• 手動格式化日期和價格。
• 用國旗代表語言，以及把人困在錯誤版本中的自動轉址。
• 希望被索引的頁面所有語言共用一個網址。
• 缺少 hreflang 的回指連結，導致 Google 忽略標註。
• 只翻譯介面，沒有翻譯內容，或反過來。
• 未經審閱的機器翻譯用在價格、法律和結帳頁面。

多語言檢查清單

• 沒有寫死的使用者可見字串；已使用複數規則和佔位符
• 日期、數字和貨幣以 Intl 格式化
• 每一頁都有以母語名稱顯示的語言切換器，且會記住選擇
• 公開頁面每種語言都有獨立網址；沒有強制轉址
• 每個版本都有 hreflang，包括自我參照和 x-default
• 每一頁都正確設定 html lang（需要時也設定 dir="rtl"）
• 資料庫內容已翻譯，並設定合理的備用方案
• 電子郵件和通知以使用者的語言寄出
• 面向客戶的文字已由母語流利的人審閱

在 Mythex 加入多種語言

在 Mythex，你是在對話中請求加入語言，沒有獨立的翻譯面板，因此上面的提示詞可以直接使用。先完成國際化步驟，並在預覽中檢查，再加入語言；這是一項大型重構，而對話檢查點能讓你在出問題時回復（對話與檢查點）。如果你希望應用程式透過 AI 或翻譯 API 自動翻譯內容，這會使用你自己的 API 金鑰，並儲存在專案設定中（環境變數與機密）；如何使用 LLM API 說明了相關費用。新語言準備好後，再重新發布。

常見問題