Next.js 国际化 (i18n) 与 next-i18next 和 Intlayer

both next-i18next 和 Intlayer 是为 Next.js 应用程序设计的开源国际化 (i18n) 框架。它们广泛用于软件项目中的翻译、地方化和语言切换管理。

这两种解决方案包括三个主要概念：

1. 内容声明：定义应用程序可翻译内容的方法。

   • 在 i18next 的情况下称为 resource，内容声明是一个结构化的 JSON 对象，包含一种或多种语言翻译的键值对。有关更多信息，请参阅 i18next 文档。
   • 在 Intlayer 的情况下称为 content declaration file，内容声明可以是导出结构化数据的 JSON、JS 或 TS 文件。有关更多信息，请参阅 Intlayer 文档。

2. 工具：构建和解释应用程序中的内容声明的工具，例如 getI18n()、useCurrentLocale() 或 useChangeLocale() 对于 next-i18next，以及 useIntlayer() 或 useLocale() 对于 Intlayer。

3. 插件和中间件：用于管理 URL 重定向、打包优化等功能，例如 next-i18next 的 next-i18next/middleware 或 Intlayer 的 intlayerMiddleware。

Intlayer vs. i18next：主要区别

要探索 i18next 和 Intlayer 之间的区别，请查看我们的 next-i18next vs. next-intl vs. Intlayer 博客文章。

如何使用 Intlayer 生成 next-i18next 字典

为什么在 next-i18next 中使用 Intlayer？

Intlayer 内容声明文件通常提供更好的开发者体验。由于两个主要优点，它们更灵活且可维护：

1. 灵活的放置：Intlayer 内容声明文件可以放置在应用程序的文件树中的任何位置，简化了重复或删除组件管理，而无需留下未使用的内容声明。

   示例文件结构：

   bash

   .└── src    └── components        └── MyComponent            ├── index.content.ts # 内容声明文件            └── index.tsx

2. 集中翻译：Intlayer 将所有翻译存储在一个文件中，确保没有翻译缺失。当使用 TypeScript 时，缺失的翻译会被自动检测并报告为错误。

安装

npm install intlayer i18next next-i18next i18next-resources-to-backend

配置 Intlayer 导出 i18next 字典

导出 i18next 资源并不能确保与其他框架的 1:1 兼容。建议坚持使用基于 Intlayer 的配置以减少问题。

要导出 i18next 资源，请在 intlayer.config.ts 文件中配置 Intlayer。示例配置：

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },  content: {    dictionaryOutput: ["i18next"],    i18nextResourcesDir: "./i18next/resources",  },};export default config;

以下是文档其余部分的续写和更正：

将字典导入到您的 i18next 配置中

要将生成的资源导入到您的 i18next 配置中，请使用 i18next-resources-to-backend。以下是示例：

import i18next from "i18next";import resourcesToBackend from "i18next-resources-to-backend";i18next.use(  resourcesToBackend(    (language: string, namespace: string) =>      import(`../i18next/resources/${language}/${namespace}.json`)  ));

内容声明

各种格式的内容声明文件示例：

import { t, type DeclarationContent } from "intlayer";const content = {  key: "my-content",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),  },} satisfies DeclarationContent;export default content;

构建 next-i18next 资源

要构建 next-i18next 资源，请运行以下命令：

npx run intlayer build

这将生成资源在 ./i18next/resources 目录中。预期的输出：

.└── i18next    └── resources       └── en           └── my-content.json       └── fr           └── my-content.json       └── es           └── my-content.json

注意：i18next 命名空间对应 Intlayer 声明键。

实现 Next.js 插件

配置完成后，实施 Next.js 插件，以便在 Intlayer 内容声明文件更新时重新构建 i18next 资源。

import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {};export default withIntlayer(nextConfig);

在 Next.js 组件中使用内容

实施 Next.js 插件后，您可以在组件中使用内容：

import type { FC } from "react";import { useTranslation } from "react-i18next";const IndexPage: FC = () => {  const { t } = useTranslation();  return (    <div>      <h1>{t("my-content.title")}</h1>      <p>{t("my-content.description")}</p>    </div>  );};export default IndexPage;