如何在 Next.js 中实现国际化

在现代 web 开发中，国际化（i18n）是使应用程序支持多语言的重要步骤。Next.js 提供了强大的内置支持，可以让开发者轻松实现国际化。本文将介绍如何在 Next.js 项目中实现国际化。

1. 安装依赖

首先，安装 Next.js 国际化插件 next-translate，这是一个流行的插件，简化了 Next.js 的国际化流程。

npm install next-translate

2. 配置 next-translate

在项目根目录下创建 i18n.js 配置文件，并指定支持的语言和默认语言。

// i18n.js
module.exports = {
  locales: ['en', 'fr', 'es'], // 支持的语言
  defaultLocale: 'en', // 默认语言
  pages: {
    '*': ['common'], // 加载所有页面的默认命名空间
  },
};

然后在 next.config.js 中引入这个配置。

// next.config.js
const nextTranslate = require('next-translate');

module.exports = nextTranslate({
  reactStrictMode: true,
});

3. 创建翻译文件

在项目根目录下创建 locales 文件夹，并为每种语言创建相应的子文件夹和翻译文件。例如，为英文和法文创建 locales/en/common.json 和 locales/fr/common.json。

// locales/en/common.json
{
  "welcome": "Welcome to our website"
}

// locales/fr/common.json
{
  "welcome": "Bienvenue sur notre site Web"
}

4. 使用翻译

在组件中使用 useTranslation 钩子来加载和使用翻译。

// pages/index.js
import useTranslation from 'next-translate/useTranslation';

const Home = () => {
  const { t } = useTranslation('common');

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

export default Home;

5. 动态路由

Next.js 支持基于语言的动态路由。例如，可以为不同语言创建不同的页面路径。

// pages/[lang]/index.js
import useTranslation from 'next-translate/useTranslation';

const Home = () => {
  const { t } = useTranslation('common');

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

export default Home;

6. 切换语言

可以通过链接或按钮来切换语言。

// components/LanguageSwitcher.js
import Link from 'next/link';
import { useRouter } from 'next/router';

const LanguageSwitcher = () => {
  const { locale, locales, asPath } = useRouter();

  return (
    <div>
      {locales.map((loc) => (
        <Link href={asPath} locale={loc} key={loc}>
          <button disabled={loc === locale}>{loc}</button>
        </Link>
      ))}
    </div>
  );
};

export default LanguageSwitcher;

将此组件添加到你的页面中即可实现语言切换。

结论

通过以上步骤，您可以在 Next.js 项目中轻松实现国际化。使用 next-translate 插件和 Next.js 内置的 i18n 支持，能够快速地创建支持多语言的现代 Web 应用程序。无论是静态内容还是动态内容，都能方便地进行翻译和管理。