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 應用程式介面中，建立一個專案，然後前往它的 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.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 應用就會自動翻譯。請注意，只有在 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!