為 React 應用程式輕鬆實現本地化

您是否希望將您的 React 應用程式擴展到新市場？TacoTranslate 讓本地化您的 React 應用變得非常簡單，使您能輕鬆觸及全球用戶，無需繁瑣步驟。

為什麼選擇 TacoTranslate 來搭配 React？

無縫整合：專為 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。在此處閱讀更多關於 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

透過將您的應用程式包裹在 TacoTranslate 上下文提供者中，來初始化您的 React 應用程式的 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 應用程式將自動被翻譯。請注意，只有擁有 API 金鑰 read/write 權限的環境，才能建立新的要翻譯的字串。

我們建議設置一個封閉且安全的預備環境，用以測試您的生產應用程式，並在上線前新增字串。這可以防止任何人竊取您的祕密 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!