Next.js 如何使用 next-i18next？

推荐答案

在 Next.js 中使用 next-i18next 进行国际化（i18n）的步骤如下：

1. 安装依赖： 首先，安装 next-i18next 和 i18next 依赖：

   npm install next-i18next i18next

2. 配置 next-i18next： 在项目根目录下创建 next-i18next.config.js 文件，配置语言支持：

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

3. 创建语言文件： 在 public/locales 目录下创建语言文件，例如：

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

4. 集成到 Next.js 应用： 在 _app.js 或 _app.tsx 中集成 next-i18next：

   import { appWithTranslation } from 'next-i18next';
   
   function MyApp({ Component, pageProps }) {
     return <Component {...pageProps} />;
   }
   
   export default appWithTranslation(MyApp);

5. 在页面中使用翻译： 在页面组件中使用 useTranslation 钩子获取翻译内容：

   import { useTranslation } from 'next-i18next';
   
   export default function HomePage() {
     const { t } = useTranslation('common');
     return <h1>{t('welcome')}</h1>;
   }

6. 配置 getStaticProps 或 getServerSideProps： 在页面中使用 serverSideTranslations 来预加载翻译内容：

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

本题详细解读

1. next-i18next 的作用

next-i18next 是一个用于 Next.js 的国际化库，它基于 i18next，提供了与 Next.js 无缝集成的能力。通过 next-i18next，开发者可以轻松地在 Next.js 应用中实现多语言支持。

2. 配置文件的解析

next-i18next.config.js 文件中的 i18n 配置项定义了默认语言和支持的语言列表。defaultLocale 是默认语言，locales 是支持的语言列表。

3. 语言文件的结构

语言文件通常以 JSON 格式存储在 public/locales 目录下。每个语言对应一个文件夹，文件夹内包含多个 JSON 文件，每个文件对应一个命名空间（namespace）。例如，common.json 文件可能包含如下内容：

{
  "welcome": "Welcome to our website!"
}

4. appWithTranslation 的作用

appWithTranslation 是一个高阶组件，用于将 next-i18next 集成到 Next.js 应用中。它会自动处理语言切换和翻译内容的加载。

5. useTranslation 钩子

useTranslation 是 next-i18next 提供的 React 钩子，用于在组件中获取翻译内容。t 函数用于根据键名获取对应的翻译文本。

6. serverSideTranslations 的作用

serverSideTranslations 是一个辅助函数，用于在 getStaticProps 或 getServerSideProps 中预加载翻译内容。它确保在页面渲染时，翻译内容已经准备好。

7. 语言切换的实现

next-i18next 提供了内置的语言切换功能。可以通过 next/router 的 push 方法实现语言切换：

// www.javascriptcn.com code example
import { useRouter } from 'next/router';

function LanguageSwitcher() {
  const router = useRouter();

  const changeLanguage = (locale) => {
    router.push(router.pathname, router.asPath, { locale });
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('zh')}>中文</button>
    </div>
  );
}

通过以上步骤，你可以在 Next.js 应用中轻松实现国际化支持。