Next.js 應用程式中文化 (i18n) 的最佳解決方案
您是否想將您的 Next.js 應用擴展到新市場？TacoTranslate 使本地化您的 Next.js 專案變得非常簡單，讓您輕鬆觸及全球受眾，無需煩惱。
為什麼選擇 TacoTranslate 來搭配 Next.js？
- 無縫整合：專為 Next.js 應用程式設計，TacoTranslate 可輕鬆整合到您現有的工作流程中。
- 自動字串收集：不再需要手動管理 JSON 檔案。TacoTranslate 會自動從您的程式碼庫收集字串。
- 人工智慧驅動的翻譯：利用 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：存放字串的「資料夾」，例如您的網站 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 。
將 client 建立在單獨的檔案中，讓日後使用更加方便。現在，使用自訂的 /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 金鑰，並避免通過添加新的、不相關的字串來膨脹你的翻譯專案。
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!