在 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: 用來儲存字串的「資料夾」，例如您網站的 URL。在此閱讀更多關於來源的資訊。

.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 驅動的翻譯確保語境上準確且高品質的結果。
可擴充的解決方案：隨著應用程式與客戶群成長，輕鬆新增語言支援。

立即開始！

您的 React 應用程式會在您向 Translate 元件新增任何字串時自動被翻譯。請注意，只有使用具有 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!