如何使用 Next.js 和 i18next 实现网站多语言版本翻译

乐闻

2024年02月23日 03:37· 阅读 2022

前言

在构建一个面向全球受众的现代网络应用程序时，提供多语言支持变得至关重要。Next.js 作为一个功能丰富的React框架，它支持国际化（i18n）的功能，让开发者能够轻松地创建多语言网站。在这篇教程中，我将指导你如何使用 Next.js 和 i18n 实现网站翻译。

实现步骤

一、安装依赖

Next.js 支持多种国际化库。对于本教程，我们将使用 next-i18next，这是一个为 Next.js 项目优化的 i18n 库。安装它，运行：

bash
npm install next-i18next

二、配置 next-i18next

首先，在项目的根目录下创建一个新的文件夹 i18n，然后在该文件夹中创建一个名为 next-i18next.config.js的配置文件，如下所示：

js
// next-i18next.config.js

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

在上述配置中，defaultLocale代表默认语言，locales数组列出了网站支持的语言代码。

三、更新 next.config.js

接着，需要在 Next.js 的配置文件中引入你的 i18n 配置。修改 next.config.js文件以包含以下内容：

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

module.exports = {
  i18n,
};

四、设置语言文件

在 public文件夹内，建立一个 locales目录，然后为你的每种语言创建相应的子文件夹。例如：

shell
public/
  locales/
    en/
      common.json
    es/
      common.json
    de/
      common.json

在这些 JSON 文件中，你可以定义键和翻译文本。例如 public/locales/en/common.json可能看起来像这样：

json
{
  "welcome": "Welcome to our website!",
  "description": "This is an example of multi-language support in Next.js."
}

对应的 public/locales/es/common.json文件：

json
{
  "welcome": "¡Bienvenido a nuestro sitio web!",
  "description": "Este es un ejemplo de soporte multilingüe en Next.js."
}

五、使用翻译 Hook

在你的组件中，你现在可以使用 useTranslation Hook 来加载和使用翻译。例如，在 pages/index.js：

jsx
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export default function HomePage() {
  const { t } = useTranslation('common');

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export async function getServerSideProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}

在上面的代码中，useTranslation Hook 调用 t 函数来检索特定的翻译字符串。getServerSideProps 函数使用 serverSideTranslations 工具来确保在服务器端渲染时加载正确的语言文件。

进阶使用

添加语言切换功能

要允许用户切换语言，你可以添加一个语言选择器。例如，在你的导航组件中：

jsx
import { useRouter } from 'next/router';

export default function,LanguageSwitcher 导航组件：

```jsx
import Link from 'next/link';
import { useRouter } from 'next/router';

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locales, locale: currentLocale } = router;

  return (
    <div>
      {locales.map((locale) => {
        if (locale === currentLocale) return null; // 不显示当前激活的语言
        return (
          <Link 
            key={locale} 
            href={router.asPath} 
            locale={locale}
            passHref
          >
            <button>{locale.toUpperCase()}</button>
          </Link>
        );
      })}
    </div>
  );
}

该组件将通过 Next.js 的 Link 组件来切换不同的语言版本。注意，我们在 Link 组件的 href 属性中传递了 router.asPath，这确保了在切换语言时保持当前页面的路径不变。

现在你可以在你的布局或页面中导入并使用 LanguageSwitcher 组件。

jsx
import LanguageSwitcher from '../components/LanguageSwitcher';

// 这可以是你的页面或布局组件的一部分
export default function Layout({ children }) {
  return (
    <>
      <header>
        {/* ... 其他导航元素 ... */}
        <LanguageSwitcher />
      </header>
      <main>{children}</main>
    </>
  );
}

总结

通过本文学会如何使用 next-i18next 在 Next.js 应用程序中实现了多语言支持。用户可以轻松地切换语言，并看到相应的页面内容翻译。通过配置语言文件和使用 useTranslation Hook，你可以将国际化功能集成到你的组件中，从而为全球受众提供更友好的用户体验。

标签：

Next.js i18next