在 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 金鑰分頁。建立一個 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!