React 應用程式國際化（i18n）的最佳解決方案

您是否想將 React 應用擴展到新市場？TacoTranslate 讓為 React 應用做本地化變得非常簡單，協助您輕鬆觸及全球受眾，免去繁瑣流程。

為什麼要為 React 選擇 TacoTranslate？

無縫整合：專為 React 應用設計，TacoTranslate 可無縫整合到您的既有工作流程中。
自動字串收集：不再需要手動管理 JSON 檔案。TacoTranslate 會自動從您的程式碼庫中收集字串。
AI 驅動的翻譯：運用 AI 的能力提供符合上下文且貼合應用程式語調的精確翻譯。
即時語言支援：只需一鍵即可新增語言支援，讓您的應用程式能被全球使用。

運作方式

使用 npm 安裝 TacoTranslate 套件：

npm install tacotranslate

安裝好模組後，您需要建立一個 TacoTranslate 帳戶、一個翻譯專案，以及相關的 API 金鑰。在此建立帳戶。這是免費的，且 不需要您提供信用卡資訊。

在 TacoTranslate 應用程式的介面中，建立一個專案，並前往其 API 金鑰分頁。建立一個 read 金鑰，以及一個 read/write 金鑰。我們會將它們儲存為環境變數。read 金鑰就是我們所稱的 public，而 read/write 金鑰則為 secret。例如，你可以將它們新增到專案根目錄下的 .env 檔案中。

您還需要新增另外兩個環境變數： TACOTRANSLATE_DEFAULT_LOCALE 和 TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE：預設的後備語系代碼。在此範例中，我們會將它設為 en（英文）。
TACOTRANSLATE_ORIGIN：存放字串的「資料夾」，例如您網站的網址。在此閱讀更多關於來源（origins）的資訊。

.env

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

務必不要將機密 read/write API 金鑰洩漏到客戶端生產環境。

設定 TacoTranslate

在您的 React 應用程式中，透過將應用程式包裹在 TacoTranslate 的上下文提供者（context provider）中來初始化 TacoTranslate：

import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';

const tacoTranslate = createTacoTranslateClient({
	apiKey: 'YOUR_API_KEY',
});

export default function App() {
	const [locale, setLocale] = useState('en');

	return (
		<TacoTranslate client={tacoTranslate} locale={locale}>
			<Translate string="Hello, world!"/>
		</TacoTranslate>
	);
}

您現在可以在應用程式的任何位置使用 Translate 元件來顯示翻譯後的文字！請務必查看我們的文件，以取得更多資訊，以及針對您設定的實作指南。

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

使用 TacoTranslate 的好處

省時：自動化繁瑣的在地化與字串蒐集流程，為你節省寶貴時間。
具成本效益：減少手動翻譯的需求，降低你的在地化成本。
提高準確性：由 AI 驅動的翻譯能確保語境相符且高品質的結果。
可擴展的解決方案：隨著應用程式與客戶群成長，輕鬆新增對新語言的支援。

立即開始！

當您將任何字串加入 Translate 組件時，您的 React 應用程式將會自動被翻譯。請注意，只有擁有 read/write 權限的環境（使用該 API 金鑰）才能建立要翻譯的新字串。

我們建議您設置一個封閉且安全的暫存環境，用來測試生產環境的應用程式，並在上線前新增字串。這樣可以防止任何人任何人竊取您的秘密 API 金鑰，並避免有人藉此新增惡意字串而使您的翻譯專案膨脹。

Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.

TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!