Next.js 應用程式最佳的國際化 (i18n) 解決方案
您是否希望將您的 Next.js 應用程式擴展到新的市場？TacoTranslate 讓本地化您的 Next.js 專案變得非常簡單，助您輕鬆觸及全球用戶，無需煩惱。
為什麼選擇 TacoTranslate 作為 Next.js 的解決方案？
- 無縫整合：專為 Next.js 應用程式設計，TacoTranslate 輕鬆整合到您現有的工作流程中。
- 自動字串收集：不再需要手動管理 JSON 檔案。TacoTranslate 自動從您的代碼庫中收集字串。
- AI 驅動翻譯：利用 AI 的力量，提供符合應用程式語境且準確的翻譯。
- 即時語言支援：只需點擊一下，即可新增對新語言的支援，讓您的應用程式全球可用。
運作方式
隨著世界變得越來越全球化，網頁開發者為來自不同國家和文化的用戶打造應用程式變得越來越重要。實現這一目標的關鍵方法之一是國際化（i18n），它允許您將應用程式調整為不同語言、貨幣和日期格式。
在本教學中，我們將探討如何為您的 React Next.js 應用程式加入帶有伺服器端渲染的國際化功能。 TL;DR: 在這裡查看完整範例。
本指南適用於使用 Pages Router 的 Next.js 應用程式。
如果您正在使用 App Router，請改為參考此指南。
步驟 1： 安裝 i18n 函式庫
要在您的 Next.js 應用程式中實現國際化，我們首先會選擇一個 i18n 函式庫。有幾個熱門的函式庫，包括 next-intl。然而，在本範例中，我們將使用 TacoTranslate。
TacoTranslate 使用最先進的 AI 自動將您的字串翻譯成任何語言，並免除您管理 JSON 檔案的繁瑣工作。
讓我們在終端機中使用 npm 來安裝它：
npm install tacotranslate步驟 2： 創建一個免費的 TacoTranslate 帳戶
既然您已安裝了該模組，現在是時候建立您的 TacoTranslate 帳戶、翻譯專案和相關的 API 金鑰了。在此創建帳戶。 完全免費，且不需要您加入信用卡資料。
在 TacoTranslate 應用程式的使用者介面中，建立一個專案，並導航到其 API 金鑰標籤。建立一組 read 金鑰，以及一組 read/write 金鑰。我們將它們儲存為環境變數。 read 金鑰即我們所稱的 public，而 read/write 金鑰則為 secret。例如，您可以將它們加入到專案根目錄下的 .env 檔案中。
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010請務必絕不將秘密 read/write API 金鑰洩漏到用戶端的生產環境中。
我們還將新增另外兩個環境變數：TACOTRANSLATE_DEFAULT_LOCALE 和 TACOTRANSLATE_ORIGIN。
TACOTRANSLATE_DEFAULT_LOCALE：預設的後備語系代碼。在此範例中，我們將其設為en，代表英文。TACOTRANSLATE_ORIGIN：儲存字串的「資料夾」，例如您的網站 URL。在此閱讀更多關於 origins 的資訊。
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com步驟 3： 設定 TacoTranslate
要將 TacoTranslate 整合到您的應用程式中，您需要使用之前的 API 金鑰來建立一個客戶端。例如，建立一個名為 /tacotranslate-client.js 的檔案。
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY ??
'',
projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;我們將會自動定義 TACOTRANSLATE_API_KEY 。
將客戶端創建在一個獨立的檔案中，可以讓日後更容易重複使用。現在，使用自訂的 /pages/_app.tsx，我們將加入 TacoTranslate 提供者。
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}如果您已經有自訂的 pageProps 和 _app.tsx，請使用上方的屬性和程式碼來擴充定義。
步驟 4： 實作伺服器端渲染
TacoTranslate 支援您的翻譯內容進行伺服器端渲染。這大大提升了使用者體驗，讓翻譯後的內容能立即呈現，而非先閃現未翻譯的內容。此外，我們還可以跳過客戶端的網路請求，因為我們已經擁有所有需要的翻譯。
我們將從創建或修改 /next.config.js 開始。
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
});
};修改 isProduction 檢查以適合您的設置。如果 true，TacoTranslate 將顯示公有 API 金鑰。如果我們在本地、測試或暫存環境 （isProduction is false） 中，我們將使用密鑰 read/write API 金鑰來確保發送新字串進行翻譯。
到目前為止，我們只設定了 Next.js 應用程式支援的語言清單。接下來，我們將為所有頁面取得翻譯。為此，您可以根據需求使用 getTacoTranslateStaticProps 或 getTacoTranslateServerSideProps。
這些函式接受三個參數：一個 Next.js Static Props Context 物件、TacoTranslate 的配置，以及可選的 Next.js 屬性。請注意，getTacoTranslateStaticProps 中的 revalidate 預設設置為 60，以確保你的翻譯保持最新狀態。
要在頁面中使用任一函式，假設你有一個像 /pages/hello-world.tsx 這樣的頁面檔案。
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}您現在應該能夠使用 Translate 元件來翻譯所有 React 元件內的字串。
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}步驟 5： 部署並測試！
我們完成了！當您將任何字串加入 Translate 元件時，您的 Next.js 應用程式將自動進行翻譯。請注意，只有擁有 read/write 權限的 API 金鑰環境，才能建立新的翻譯字串。我們建議您設置一個封閉且安全的預備環境，在那裡使用此類 API 金鑰測試您的生產應用程式，並在上線前添加新的字串。這將防止任何人竊取您的秘密 API 金鑰，並避免因添加新的無關字串而使您的翻譯專案膨脹。
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! 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. Get started today!