如何在使用 App Router 的 Next.js 应用程序中实现国际化
通过国际化（i18n），让您的 React 应用更易访问，拓展新市场。
随着世界日益全球化，网络开发者构建能够满足不同国家和文化用户需求的应用变得越来越重要。实现这一目标的关键方法之一是国际化（i18n），它允许您将应用适配不同的语言、货币和日期格式。
在本文中，我们将探讨如何为您的 React Next.js 应用添加国际化支持，并实现服务器端渲染。 TL;DR: 查看完整示例。
本指南适用于使用 App Router 的 Next.js 应用程序。
如果您使用的是 Pages 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_IS_PRODUCTION === 'true'
? process.env.TACOTRANSLATE_PROJECT_LOCALE
: undefined,
});
module.exports = tacoTranslate;我们很快就会自动定义 TACOTRANSLATE_API_KEY 和 TACOTRANSLATE_PROJECT_LOCALE。
在一个单独的文件中创建客户端使其以后更容易再次使用。getLocales 只是一个带有一些内置错误处理的实用函数。现在，创建一个名为 /app/[locale]/tacotranslate.tsx 的文件，我们将在这里实现 TacoTranslate 提供程序。
'use client';
import React, {type ReactNode} from 'react';
import {
type TranslationContextProperties,
TacoTranslate as ImportedTacoTranslate,
} from 'tacotranslate/react';
import tacoTranslateClient from '@/tacotranslate-client';
export default function TacoTranslate({
locale,
origin,
localizations,
children,
}: TranslationContextProperties & {
readonly children: ReactNode;
}) {
return (
<ImportedTacoTranslate
client={tacoTranslateClient}
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</ImportedTacoTranslate>
);
}请注意 'use client';，这表示这是一个客户端组件。
上下文提供程序现在准备就绪，创建一个名为 /app/[locale]/layout.tsx的文件，这是我们应用程序中的根布局。请注意，此路径有一个使用 Dynamic Routes的文件夹，其中 [locale] 是 dynamic 参数。
import React, {type ReactNode} from 'react';
import {type Locale, isRightToLeftLocaleCode} from 'tacotranslate';
import './global.css';
import tacoTranslateClient from '@/tacotranslate-client';
import TacoTranslate from './tacotranslate';
export async function generateStaticParams() {
const locales = await tacoTranslateClient.getLocales();
return locales.map((locale) => ({locale}));
}
type RootLayoutParameters = {
readonly params: Promise<{locale: Locale}>;
readonly children: ReactNode;
};
export default async function RootLayout({params, children}: RootLayoutParameters) {
const {locale} = await params;
const origin = process.env.TACOTRANSLATE_ORIGIN;
const localizations = await tacoTranslateClient.getLocalizations({
locale,
origins: [origin /* , other origins to fetch */],
});
return (
<html lang={locale} dir={isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr'}>
<body>
<TacoTranslate
locale={locale}
origin={origin}
localizations={localizations}
>
{children}
</TacoTranslate>
</body>
</html>
);
}这里首先需要注意的是，我们使用了 Dynamic Route 参数 [locale] 来获取该语言的翻译。此外，generateStaticParams 确保了你为项目激活的所有语言代码都已被预渲染。
现在，让我们构建我们的第一个页面！创建一个名为 /app/[locale]/page.tsx 的文件。
import React from 'react';
import {Translate} from 'tacotranslate/react';
export const revalidate = 60;
export default async function Page() {
return (
<Translate string="Hello, world!" />
);
}请注意 revalidate 变量，它告诉 Next.js 在 60 秒后重新构建页面，并保持您的翻译内容最新。
步骤 4： 实现服务器端渲染
TacoTranslate 支持服务器端渲染。这大大提升了用户体验，因为它能够立即显示翻译后的内容，而不是先出现一闪而过的未翻译内容。此外，我们还可以跳过客户端的网络请求，因为我们已经拥有用户正在查看的页面所需的翻译内容。
要设置服务器端渲染，请创建或修改 /next.config.js：
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = await withTacoTranslate(
{},
{
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'),
}
);
// NOTE: Remove i18n from config when using the app router
return {...config, i18n: undefined};
};修改 isProduction 检查以适合您的设置。如果 true，TacoTranslate 将显示公有 API 密钥。如果我们在本地、测试或暂存环境 （isProduction is false） 中，我们将使用密钥 read/write API 密钥来确保发送新字符串进行翻译。
为了确保路由和重定向按预期工作，我们需要创建一个名为 /middleware.ts 的文件。使用 Middleware，我们可以将用户重定向到以其首选语言显示的页面。
import {type NextRequest} from 'next/server';
import {middleware as tacoTranslateMiddleware} from 'tacotranslate/next';
import tacoTranslate from '@/tacotranslate-client';
export const config = {
matcher: ['/((?!api|_next|favicon.ico).*)'],
};
export async function middleware(request: NextRequest) {
return tacoTranslateMiddleware(tacoTranslate, request);
}请确保根据Next.js 中间件文档设置 matcher。
在客户端，您可以修改 locale cookie 来更改用户的首选语言。请参阅 完整示例代码，了解如何实现！
步骤 5： 部署并测试！
我们完成了！当你将任何字符串添加到 Translate 组件时，你的 React 应用将自动被翻译。请注意，只有拥有 read/write 权限的 API 密钥环境才能创建新的字符串进行翻译。我们建议拥有一个封闭且安全的预发布环境，在那里你可以使用这样的 API 密钥测试你的生产应用，先添加新的字符串再上线。这将防止任何人窃取你的秘密 API 密钥，并避免通过添加新的、不相关的字符串来膨胀你的翻译项目。
请务必查看我们GitHub主页上的完整示例。在那里，您还会找到一个使用 Pages Router 的示例！如果遇到任何问题，欢迎联系我们，我们将非常乐意为您提供帮助。
TacoTranslate 让您能够快速自动地将 React 应用程序本地化到任何语言，亦支持从任何语言转换。今天就开始吧！