如何在使用 Pages Router 的 Next.js 應用中實現國際化
Make your React application more accessible and reach new markets with internationalization (i18n).
隨著世界的全球化，網頁開發者越來越重要的是建立可以滿足來自不同國家和文化的用戶需求的應用程式。實現這一目標的關鍵方法之一是國際化（i18n），它使您能夠將您的應用程式適應不同的語言、貨幣和日期格式。
在本教程中，我們將探討如何將國際化添加到您的 React Next.js 應用程式中，並使用伺服器端渲染。 TL;DR: 在這裡查看完整示例。
這篇指南適用於使用 Pages Router 的 Next.js 應用程序。
如果您正在使用 App Router，請參閱這篇指南。
步驟 1： 安裝 i18n 函式庫
要在您的 Next.js 應用中實現國際化，我們首先需要選擇一個 i18n 庫。有幾個受歡迎的庫，包括 next-intl. 不過，在這個例子中，我們將使用 TacoTranslate.
TacoTranslate 使用尖端人工智能自動將您的字符串翻譯成任何語言，並使您免於繁瑣的 JSON 文件管理。
讓我們在您的終端中使用 npm 來安裝它：
npm install tacotranslate步驟 2： 建立一個免費的 TacoTranslate 帳戶
現在您已經安裝了模塊，是時候創建您的 TacoTranslate 帳戶、翻譯項目和相關的 API 密鑰了。 在這裡創建帳戶。 這是免費的，並且 不需要您添加信用卡。
在 TacoTranslate 應用程式的 UI 中，建立一個專案，並導航到其 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: 您的字串將存儲的“文件夾”，例如您網站的網址。 在此閱讀有關來源的更多信息。
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com步驟 3： 設定 TacoTranslate
要將 TacoTranslate 整合到您的應用中，您需要使用之前的 API 金鑰創建一個客戶端。例如，創建一個名為 /utilities/tacotranslate.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 Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import tacoTranslate from '../utilities/tacotranslate';
type PageProperties = {
origin: string;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<Component {...pageProps} />
</TacoTranslate>
);
}如果您已經有自定義的 pageProps 和 _app.tsx, 請使用上述的屬性和代碼擴展定義。
步驟 4： 實現伺服器端渲染
TacoTranslate 允許對您的翻譯進行伺服器端渲染。這大大改善了用戶體驗，因為它會立即顯示翻譯過的內容，而不是先顯示未翻譯內容的閃爍。此外，我們可以跳過客戶端的網路請求，因為我們已經擁有所有需要的翻譯。
我們將開始創建或修改 /next.config.js。
const tacoTranslate = require('./utilities/tacotranslate');
module.exports = async () => {
const locales = await tacoTranslate.getLocales();
const isProduction =
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production');
const [projectLocale] = locales;
return {
env: {
TACOTRANSLATE_ORIGIN: process.env.TACOTRANSLATE_ORIGIN,
TACOTRANSLATE_API_KEY: isProduction
? process.env.TACOTRANSLATE_PUBLIC_API_KEY
: process.env.TACOTRANSLATE_SECRET_API_KEY,
TACOTRANSLATE_DEFAULT_LOCALE: isProduction ? projectLocale : undefined,
},
i18n: {
defaultLocale: projectLocale,
locales,
},
};
};這裡有幾點需要注意。首先，我們正在獲取您為翻譯項目啟用的所有語言。響應數組中的第一個字符串是您為該項目設置的區域代碼。
現在來到關鍵部分： 決定我們是否處於生產環境。修改 isProduction 檢查以適應您的設置。如果我們處於本地、測試或檔期環境，我們應該使用秘密的 read/write API 密鑰，以確保新字符串被發送進行翻譯。如果我們在生產環境中，我們應該使用公共的 read 密鑰。
到目前為止，我們只為 Next.js 應用設置了一個支持語言的列表。接下來，我們將為您所有的頁面獲取翻譯。首先，創建一個新文件 /utilities/custom-get-static-props.ts.
import {type GetStaticPropsContext} from 'next';
import {type Origin} from 'tacotranslate';
import tacoTranslate from './tacotranslate';
export default async function customGetStaticProps(
{
locale = process.env.TACOTRANSLATE_DEFAULT_LOCALE,
locales,
}: GetStaticPropsContext,
additionalOrigins: Origin[] = []
) {
const origin = process.env.TACOTRANSLATE_ORIGIN;
const origins = [origin, ...additionalOrigins];
const localizations = await tacoTranslate.getLocalizations({locale, origins});
return {
props: {locale, locales, localizations, origin},
revalidate: 60,
};
}這個函數接受兩個參數：一個 Next.js Static Props Context 物件，以及一個可選的額外來源數組，用於從中獲取翻譯，如果您在應用中使用多個來源。另外，請注意 revalidate 屬性在 return 語句上，這告訴 Next.js 在 60 秒後重新構建頁面。這將保持服務器端渲染的翻譯保持最新。
要在頁面中使用這個函數，假設您有一個頁面文件，如 /pages/hello-world.tsx.
import {Translate} from 'tacotranslate/react';
import customGetStaticProps from '../utilities/custom-get-static-props';
export async function getStaticProps(context) {
return customGetStaticProps(context);
}
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 元件時，您的 React 應用程式將自動翻譯。請注意，只有擁有 read/write 權限的環境才能創建新的需要翻譯的字串。我們建議擁有一個封閉且安全的測試環境，在那裡您可以使用這樣的 API 金鑰測試您的生產應用，並在上線前添加新的字串。這將防止任何人竊取您的祕密 API 金鑰，並可能透過添加新的、不相關的字串來膨脹您的翻譯專案。
務必 查看我們 GitHub 個人資料上的完整範例。在那裡，您還會找到如何使用 App Router 的範例！如果您遇到任何問題，請隨時 聯繫我們，我們將非常樂意提供幫助。
TacoTranslate 讓您快速自動將您的 React 應用程式本地化為任何語言。今天就開始吧！