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 使用最先进的人工智能自动将您的字符串翻译成任何语言，解放您无需繁琐管理 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。在此处了解更多关于 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 密钥，并避免通过添加新的无关字符串导致翻译项目膨胀。
请务必查看我们GitHub主页上的完整示例。在那里，您还会找到如何使用 App Router 实现此功能的示例！如果遇到任何问题，欢迎随时联系我们，我们将非常乐意提供帮助。
TacoTranslate 让您能够快速自动地将 React 应用程序本地化为任何语言，亦支持从任何语言本地化回来。立即开始吧！