Next.js 應用程式國際化 (i18n) 的最佳解決方案
您是否希望將您的 Next.js 應用程式擴展到新的市場？TacoTranslate 讓您能輕鬆將您的 Next.js 專案在地化，無需繁瑣流程即可觸及全球受眾。
為什麼要為 Next.js 選擇 TacoTranslate？
- 無縫整合：專為 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 應用程式 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。 在此閱讀有關來源的更多資訊。
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.comStep 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 金鑰。如果我們處於本地、測試或 staging 環境（isProduction is false)，我們會使用祕密的 read/write API 金鑰，以確保新的字串會被送去翻譯。
到目前為止，我們只為 Next.js 應用程式設定了支援語言的清單。接下來要做的是為所有頁面取得翻譯。為此，您可以根據需求使用 getTacoTranslateStaticProps 或 getTacoTranslateServerSideProps。
這些函數接受三個參數：一個 Next.js Static Props Context 物件、TacoTranslate 的設定，以及可選的 Next.js 屬性。請注意， revalidate 在 getTacoTranslateStaticProps 上預設設為 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 應用程式現在會自動被翻譯。請注意，只有在 API 金鑰上擁有 read/write 權限的環境，才能建立要翻譯的新字串。我們建議建立一個封閉且安全的暫存環境，在那裡您可以使用具有該權限的 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!