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，请参阅此指南。
步骤 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_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 属性。请注意，getTacoTranslateStaticProps 上的 revalidate 默认设置为 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 应用程序将自动被翻译。请注意，只有拥有 read/write 权限的 API 密钥的环境才能创建新的翻译字符串。我们建议你设立一个封闭且安全的预发布环境，在那里使用这样的 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!