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 应用的 UI 中，创建一个项目，然后前往其 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 权限的环境中，才可以创建新的字符串以供翻译。我们建议设置一个封闭且安全的预发布（staging）环境，在那里您可以使用这样的 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!