Next.js 国际化插件 `next-i18next` 教程

1. 项目介绍

next-i18next 是一个专门为 Next.js 应用程序设计的国际化(i18n)解决方案。它结合了 i18next 和 react-i18next 的优势，提供简单易用的接口来管理多语言翻译，支持静态站点生成(SSG)和服务器端渲染(SSR)，并能够与 JSON 格式的翻译文件无缝集成。

通过 next-i18next，你可以轻松地在 Next.js 应用中同步 locales 和 URLs，实现组件级别的翻译，以及在不同的命名空间之间切换。这个库简化了 Next.js 中的国际化设置，无需额外依赖，即可让你的应用具备生产级的国际支持。

2. 项目快速启动

安装

首先，确保已经安装了 Next.js。然后，在你的项目根目录中，通过 npm 或 yarn 添加 next-i18next：

npm install next-i18next i18next react-i18next
# 或者
yarn add next-i18next i18next react-i18next

配置

创建一个名为 next-i18next.config.js 的配置文件：

module.exports = {
  i18n: {
    locales: ['en', 'de'],
    defaultLocale: 'en',
  },
};

初始化

在你的 pages/_app.js 文件中引入 appWithTranslation 高阶组件（HOC）：

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => (
  <Component {...pageProps} />
);

export default appWithTranslation(MyApp);

使用翻译

现在，可以在页面或组件中使用 t 函数进行翻译：

import { useTranslation } from 'next-i18next';

function HomePage() {
  const { t } = useTranslation();

  return <h1>{t('hello-world')}</h1>;
}

export default HomePage;

翻译文件

在 public/locales 目录下创建对应的 locales 文件夹，例如 public/locales/en/translation.json 和 public/locales/de/translation.json，然后添加翻译内容：

// public/locales/en/translation.json
{
  "hello-world": "Hello, World!"
}

// public/locales/de/translation.json
{
  "hello-world": "Hallo Welt!"
}

3. 应用案例和最佳实践

• 使用 serverSideTranslations 在 SSR 或 SSG 时预加载语言包：

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  export async function getServerSideProps({ locale }) {
    const translatedPages = await serverSideTranslations(locale, ['common']);
    return { props: translatedPages };
  }
  

• 基于 URL 路径自动选择语言：

  可以设置 next-i18next.config.js 中的 path 字段，让 Next.js 自动从 URL 中解析出语言。

• 将翻译内容分离到单独的组件或上下文，以便更好地管理和维护。

• 利用 i18next 提供的特性如 Plurals、Interpolation 和 Nesting 来处理复杂场景。

4. 典型生态项目

• i18next: 核心国际化库，提供基础的翻译功能。
• react-i18next: 用于 React 的 i18next 绑定，简化 React 中的翻译使用。
• next-i18next: 专为 Next.js 设计的封装库，简化 Next.js 应用的国际化配置。

更多示例和详细信息可参考官方文档和 GitHub 示例项目：

• next-i18next 文档
• GitHub 仓库

希望本教程对你在 Next.js 中实现国际化有所帮助！如果你遇到任何问题，欢迎查看官方文档或者在社区寻求帮助。