如何在使用 Pages Router 的 Next.js 應用程式中實作國際化
透過國際化（i18n），讓你的 React 應用程式更具可及性，並開拓新市場。
隨著世界日益全球化，網頁開發者建立能夠滿足來自不同國家與文化使用者的應用程式變得愈加重要。實現這一目標的關鍵方式之一是國際化（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 應用程式的 UI 中，建立一個專案，然後前往其 API keys 分頁。建立一個 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!"/>;
}您現在應該可以在所有的 React 元件中使用 Translate 元件來翻譯字串。
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}第 5 步： 部署並測試！
我們完成了！當您在 Translate 元件中加入任何字串時，您的 React 應用程式就會自動被翻譯。請注意，只有在 API 金鑰具有 read/write 權限的環境中，才能建立要翻譯的新字串。建議您設置一個封閉且安全的暫存環境，在該環境中使用具有此類權限的 API 金鑰測試您的生產應用程式，並在上線前新增字串。這將防止任何人任何人竊取您的秘密 API 金鑰，並可能因新增不相關的字串而使您的翻譯專案膨脹。
請務必到我們的 GitHub 頁面 查看完整範例。在那裡，您也會找到使用 App Router 的示範！如果您遇到任何問題，歡迎 與我們聯絡，我們會非常樂意提供協助。
TacoTranslate 讓您能自動快速地將 React 應用程式在超過 75 種語言之間進行本地化。 立即開始！