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：存放您的字串的「資料夾」，例如您的網站網址。在這裡閱讀更多關於 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 金鑰，並避免因添加無關字串而使翻譯專案膨脹。
請務必查看我們 GitHub 頁面上的完整範例。那裡您還會找到使用 App Router 的範例！如果遇到任何問題，歡迎隨時聯絡我們，我們將非常樂意提供協助。
TacoTranslate 讓您可以快速自動地將 React 應用程式本地化至任何語言，或從任何語言轉換。今天就開始吧！