【亲测免费】 next-i18next 技术文档

next-i18next 是一个专为 Next.js 应用程序设计的国际化解决方案，它无缝集成了 i18next 和 react-i18next，提供了全面的翻译管理和组件级的翻译功能，确保了对静态站点生成（SSG）和支持服务器渲染（SSR）的良好兼容性。

安装指南

步骤 1: 添加依赖

通过以下命令来安装必要的库：

yarn add next-i18next react-i18next i18next

确保您的项目已经安装了 react 和 next。

项目的使用说明

初始化配置

1. 创建配置文件: 在项目根目录下创建 next-i18next.config.js 文件，定义默认语言和可用的语言列表。

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

2. 修改 next.config.js: 引入并配置 i18next 的设置。

   const { i18n } = require('./next-i18next.config');
   module.exports = {
     i18n,
   };
   

翻译资源

翻译文件应位于 public/locales 目录内，例如：

public/
└── locales
    ├── en
    │   └── common.json
    └── zh-CN
        └── common.json

使用翻译

• HOC 方式: 更新 _app.js 来包裹整个应用以提供翻译上下文。

  import { appWithTranslation } from 'next-i18next';
  import MyApp from '../components/MyApp';
  
  export default appWithTranslation(MyApp);
  

• 页面级别加载翻译: 在页面组件的 getStaticProps 或 getServerSideProps 中使用 serverSideTranslations 函数。

  import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
  
  export async function getStaticProps(context) {
    return {
      props: {
        ...await serverSideTranslations(context.locale, ['common']),
      },
    };
  }
  

• 在组件内部使用翻译: 利用 useTranslation 钩子执行实际的翻译工作。

  import { useTranslation } from 'next-i18next';
  
  export const MyComponent = () => {
    const { t } = useTranslation('common');
  
    return <p>{t('greeting')}</p>;
  };
  

自定义配置和进阶功能

您可以自定义 localePath 和 namespace 分配，支持代码分割，并可以通过设置 fallbackLng 来指定回退语言策略。

项目API使用文档

• appWithTranslation: 用于包装整个应用程序的高阶组件（HOC），自动处理国际化环境。
• serverSideTranslations: 异步函数，用于在服务端预获取翻译数据，用于页面的SSG或SSR过程。
• useTranslation: React钩子，允许在组件内部轻松访问翻译功能。

结论

next-i18next 提供了一个简单、高效的途径来实现 Next.js 应用的多语言支持，从安装到配置再到集成，每一步都旨在简化开发者的工作流程。通过遵循上述指导，您应该能够快速地将国际化功能添加到您的Next.js项目中，提高应用的全球可达性和用户体验。