Next.js 應用程式國際化 (i18n) 的最佳解決方案
您是否想將您的 Next.js 應用程式擴展到新的市場？TacoTranslate 讓為您的 Next.js 專案實現本地化變得非常簡單，讓您能夠免除繁瑣流程，輕鬆觸及全球受眾。
為什麼要為 Next.js 選擇 TacoTranslate？
- Seamless Integration: 專為 Next.js 應用程式設計，TacoTranslate 可無縫整合到您現有的工作流程中。
- Automatic String Collection: 不再需要手動管理 JSON 檔案。TacoTranslate 會自動從您的程式碼庫收集字串。
- AI-Powered Translations: 利用 AI 的力量提供符合語境且貼近應用程式語氣的翻譯。
- Instant Language Support: 只需一鍵即可新增語言支援，讓您的應用程式在全球都可存取。
運作方式
隨著世界日益全球化，網頁開發人員越來越需要構建能夠迎合來自不同國家和文化用戶的應用程式。實現這一目標的關鍵方法之一是國際化（i18n），它允許你將應用程式調整為不同的語言、貨幣和日期格式。
在本教學中，我們將探討如何為你的 React Next.js 應用程式加入國際化（i18n），並支援伺服器端渲染。 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。在此閱讀更多關於來源的資訊。
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 屬性。請注意， 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 應用程式將會自動被翻譯。請注意，只有擁有 read/write 權限的 API 金鑰所在環境才能建立要翻譯的新字串。我們建議設置一個封閉且安全的預備環境（staging），在該環境中使用此類 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!