React 應用程式中最佳的國際化(i18n)解決方案
您是否正在尋求將您的 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 的資訊。
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,方法是將您的應用程式包裹在 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!