For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh-tw/docs/web/i18n.md (or send Accept: text/markdown).
語言與文案
使用四語言詞典骨架覆蓋應用介面、設定標籤、郵件與通知事件。
安裝與配置
在執行任何步驟之前,請閱讀開始之前 和終端基礎知識。這些說明假設您在 VS Code 中開啟了完整的 supastack monorepo;它的根 package.json 標記儲存庫根。在 pnpm 命令中,工作區包是應用程式或共享程式碼資料夾;在產品中,工作空間是團隊的資料容器和安全邊界。 corepack pnpm --filter ... 從 monorepo 選擇一個包,同時從其根執行命令。如果您僅開啟同步的移動或桌面資料夾,則它不包含 Web 後端、Docker 設定或根指令碼:從此 monorepo 或可訪問的託管伺服器執行後端,並使用平臺資料夾自己的指令碼。環境變數是儲存在本地 .env 檔案或託管儀錶板中的命名設定;更改後重新啟動相關應用程式,並將伺服器機密保留在 NEXT_PUBLIC_ 和 EXPO_PUBLIC_ 值之外。
1. 在 VS Code 中開啟 packages/i18n/src/index.ts 檢視支援的語言名稱和語言環境幫助程式;在更改產品副本之前找到匹配的字典檔案。
2. 為英語、德語、西班牙語和法語詞典新增相同的新鍵和翻譯。
3. 從儲存庫根目錄執行 corepack pnpm test -- packages/i18n/src/index.test.ts 並使用 corepack pnpm --filter @supastack/web dev 啟動 Web。預期:語言切換器更改可見文本,同時保留當前頁面路徑。
語言環境位於 @supastack/i18n 中,包括 SUPPORTED_LOCALES、LOCALE_COOKIE、resolveLocale、getDictionary 和 localePath。代理設定 x-supastack-locale 並處理規範的英語重定向; LanguageSwitcher 更新 cookie 並保留活動子路徑。關鍵應用程式路由(/dashboard、/settings、/billing、/chat)直接在 /[locale] 字首下與軟 /{locale} 營銷主頁一起工作。
詞典涵蓋營銷導航、設定部分標籤、組織設定 chrome、事務郵件(邀請/OTP/magic-link/AI/計費)、通知首選項標籤和應用內通知事件副本。
import { getDictionary, resolveLocale, LOCALE_COOKIE } from "@supastack/i18n";
const locale = resolveLocale([
cookieStore.get(LOCALE_COOKIE)?.value,
headers.get("x-supastack-locale"),
headers.get("accept-language"),
]);
const copy = getDictionary(locale);要複製的命令
按照註釋檢視命令在哪個資料夾中執行。如果標記了兩個終端,請開啟兩個終端視窗,並在使用第二個命令時保持第一個命令執行。
corepack pnpm test -- packages/i18n/src/index.test.ts
corepack pnpm --filter @supastack/web dev實現流程
將區域設定傳遞到伺服器呈現的設定/組織頁面,並傳遞到 notificationCopyForEvent / auth 郵件傳遞選項(如果可用)。將英語保留為 DEFAULT_LOCALE,並避免在字典鍵之外發明營銷宣告。
事務性郵件與營銷觸達保持分離。先把詞典擴充完整,再考慮把每個營銷路由套進 [locale] 之下。
驗證與排障
如果某個短語出現英語,請檢查該鍵是否存在於所有四個詞典中,以及該頁面是否要求相同的鍵。如果切換語言返回主頁,請在構建語言環境連結時保留當前路徑。將電子郵件副本保留在交易電子郵件路徑上;不要將其重新用作批次外展。
執行 packages/i18n Vitest、代理測試和 locale-app-routes 測試。當區域設定字首為 de/es/fr 時,抽查 / 上的 LanguageSwitcher 和本地化的 Settings/org/dashboard/billing/chat 標題。