Next.js 的国际化（i18n）实践指南

本文为翻译作品，原文链接：Internationalization (i18n) in Next.js: A Comprehensive Guide

介绍

对于许多 Web 应用程序来说，触及全世界范围内的受众是一个重要目标。为了满足来自不同地区和语言的用户的需求，你需要实施国际化（i18n）。Next.js 是一个流行的 React 框架，使创建多语言网站变得相对简单。在这份全面的指南中，我们将逐步探索 Next.js 中的 i18n 最佳实践。

什么是国际化（i18n）？

国际化，常缩写为 i18n（因为在"i"和"n"之间有 18 个字母），是指设计和开发软件应用程序或网站以适应不同语言和地区的过程。它涉及将内容翻译成用户所在地区的语言、按用户地区的格式设置日期、数字和货币。

设置 Next.js 项目

如果你还没有开始，首先创建一个新的 Next.js 项目。你可以使用以下命令：

perl 复制代码

npx create-next-app my-i18n-app
cd my-i18n-app

选择一个 i18n 库

接下来，你需要选择一个 i18n 库来帮助进行语言管理。react-i18next 是一个受欢迎的选择，它与 React 和 Next.js 配合得很好。

安装它及其对等依赖项：

npm install i18next react-i18next

项目结构

为 i18n 组织你的项目结构。在项目根目录下创建一个 locales 目录来保存你的翻译文件。在 locales 内部，为每种支持的语言创建子目录，例如，en 代表英语，es 代表西班牙语。

这是一个示例项目结构：

arduino 复制代码

my-i18n-app/
  ├── components/
  ├── locales/
  │   ├── en/
  │   │   ├── common.json
  │   │   └── home.json
  │   └── es/
  │       ├── common.json
  │       └── home.json
  ├── pages/
  ├── ...

翻译内容

在语言目录中（例如，en 和 es）创建 JSON 文件来保存翻译数据。例如，在 locales/en/home.json 中，你可能有：

json 复制代码

{
  "welcome": "Welcome to our website!",
  "aboutUs": "About Us",
  "contact": "Contact"
}

对于西班牙语版本在 locales/es/home.json 中：

json 复制代码

{
  "welcome": "¡Bienvenidos a nuestro sitio web!",
  "aboutUs": "Sobre Nosotros",
  "contact": "Contacto"
}

集成 i18n

现在，将 i18n 集成到你的 Next.js 应用中。在你的项目根目录创建一个 i18n.js 文件：

javascript 复制代码

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // 将 i18n 传递给 react-i18next
  .init({
    resources: {
      en: {
        common: require('./locales/en/common.json'),
        home: require('./locales/en/home.json')
      },
      es: {
        common: require('./locales/es/common.json'),
        home: require('./locales/es/home.json')
      }
    },
    lng: 'en', // 默认语言
    fallbackLng: 'en', // 如果选择的语言不可用，则回退到这个语言
    interpolation: {
      escapeValue: false // 允许 HTML 标签的插值
    }
  });

export default i18n;

实现语言切换

你可以在你的应用中添加一个语言切换器，允许用户在语言之间切换。创建一个语言切换组件：

javascript 复制代码

// components/LanguageSwitcher.js
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}

export default LanguageSwitcher;

使用翻译

现在，你可以在你的组件中使用翻译。从 react-i18next 导入 useTranslation 钩子并使用它来访问翻译内容。

javascript 复制代码

// components/Home.js
import { useTranslation } from 'react-i18next';

function Home() {
  const { t } = useTranslation('home');

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

export default Home;

总结

在你的 Next.js 应用程序中实现 i18n，可以让你的内容对全球受众可访问。通过遵循这份全面的指南，你已经学会了如何设置多语言支持、组织翻译以及将 i18n 库集成到你的项目中。有了这些工具，无论你的用户偏好哪种语言，你的 Web 应用都可以触及并吸引他们。