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

本文链接：https://blog.csdn.net/gitblog_00588/article/details/141049139

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

next-i18next项目地址:https://gitcode.com/gh_mirrors/nex/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 来处理复杂场景。