針對 Next.js 應用程式的最佳國際化 (i18n) 解決方案

您是否想將您的 Next.js 應用程式擴展到新的市場？TacoTranslate 讓您能非常輕鬆地為 Next.js 專案進行本地化，讓您無需煩惱即可觸及全球受眾。

為什麼選擇 TacoTranslate 來搭配 Next.js？

無縫整合：專為 Next.js 應用設計，TacoTranslate 能輕鬆整合到您現有的工作流程中。
自動收集字串：不再需要手動管理 JSON 檔案。TacoTranslate 會自動從您的程式碼庫收集字串。
AI 驅動的翻譯：利用 AI 的力量提供符合語境且貼合應用程式語氣的精確翻譯。
即時語言支援：只需點擊即可新增對新語言的支援，讓您的應用程式能夠全球使用。

運作方式

隨著世界越來越全球化，對於網頁開發者而言，建立能滿足來自不同國家與文化使用者的應用程式變得愈發重要。實現這一目標的關鍵方法之一是國際化（i18n），它讓你能將應用程式調整為不同的語言、貨幣與日期格式。

在本教學中，我們將探討如何為你的 React Next.js 應用加入國際化，並支援伺服器端渲染。 TL;DR: 請在此查看完整範例。

本指南適用於使用 Pages Router 的 Next.js 應用程式。
如果您使用的是 App Router，請改為參閱此指南。

Step 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 檔案中。

.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 的資訊。

.env

TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

步驟 3：設定 TacoTranslate

要將 TacoTranslate 整合到您的應用程式中，您需要使用先前的 API 金鑰建立一個用戶端。例如，建立一個名為 /tacotranslate-client.js 的檔案。

/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 提供者。

/pages/_app.tsx

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 開始。

/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 這樣的頁面檔案。

/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!"/>;
}

你現在應該可以在所有的 React 組件中使用 Translate 元件來翻譯字串。

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!

.css-o12f7x{font-weight:600;font-size:85%;}針對 Next.js 應用程式的最佳國際化 (i18n) 解決方案