前端

## 前言

在构建一个面向全球受众的现代网络应用程序时，提供多语言支持变得至关重要。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`目录，然后为你的每种语言创建相应的子文件夹。例如：

```
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作为一个功能丰富的React框架，它支持国际化（i18n）的功能，让开发者能够轻松地创建多语言网站。在这篇教程中，我将指导你如何使用Next.js和i18n实现网站翻译。实现步骤一、安装依赖Next.js支持多种国际化库。对于本教程，我们将使用next-i18next，这是一个为Next.js项目优化的i18n库

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

服务端

## 前言

在当今全球化的互联网环境下，为软件添加国际化（Internationalization，通常简称为i18n）支持变得至关重要。NestJS 作为一个现代、功能丰富的 Node.js 框架，提供了强大的国际化机制。本文将指导您如何在 NestJS 项目中实现 i18n 功能。

i18n 是国际化的缩写，数字 18 代表起始字母 "I" 和结束字母 "n" 之间的字母数。在 NestJS 中实现 i18n 意味着您的应用可以支持多种语言，根据用户的偏好显示内容。

## 实现步骤

### 一、安装 i18n 依赖

NestJS 确实为 i18n 提供了一个专门的模块。首先，您需要安装相关的依赖：

```shell
npm install @nestjs/i18n i18next i18next-fs-backend i18next-http-middleware
```

- `@nestjs/i18n` 是 NestJS 的 i18n 核心模块。
- `i18next` 是一个流行的 JavaScript i18n 库。
- `i18next-fs-backend` 用于 Node.js 文件系统后端。
- `i18next-http-middleware` 是处理 HTTP 请求的 i18n 中间件。

### 二、注册I18n模块

安装完依赖后，您需要在 NestJS 应用程序中配置 i18n 模块。假设您的语言文件存放在项目根目录的 `/locales` 文件夹下，配置如下：

```typescript
// app.module.ts
import { Module } from '@nestjs/common';
import { I18nModule, I18nJsonParser } from '@nestjs/i18n';
import * as path from 'path';

@Module({
  imports: [
    I18nModule.forRoot({
      fallbackLanguage: 'en',
      parserOptions: {
        path: path.join(__dirname, '/i18n/'),
      },
      parser: I18nJsonParser,
    }),
    // ... 其他模块
  ],
  // ...
})
export class AppModule {}

```

在上述配置中，`fallbackLanguage` 表示如果没有匹配的语言文件，则使用该语言作为后备。`parserOptions` 中的 `path` 指定了语言文件的存放路径。`parser: I18nJsonParser` 使用 JSON 文件解析器。

### 三、创建语言文件

在 `/locales` 文件夹中为每种支持的语言创建一个 JSON 文件。例如：

`/locales/en.json` (英文)

```json
{
  "GREETING": "Hello"
}

```

`/locales/es.json` (西班牙文)

```json
{
  "GREETING": "Hola"
}

```

等等。每个文件包含相同的键，但值是翻译后的对应语言文本。

### 四、使用 i18n 翻译文案

一旦配置和语言文件准备就绪，您就可以在应用程序中使用 `@I18n()` 装饰器来注入 i18n 服务：

```typescript
// some.controller.ts
import { Controller, Get } from '@nestjs/common';
import { I18nService, I18nLang } from '@nestjs/i18n';

@Controller('greet')
export class SomeController {
  constructor(private readonly i18n: I18nService) {}

  @Get()
  async getGreeting(@I18nLang() lang: string) {
    const greeting = await this.i18n.translate('GREETING', { lang });
    return greeting;
  }
}

```

在上述代码中，`@I18nLang()` 装饰器自动提取当前请求中的语言，然后使用 `i18n.translate` 函数获取对应语言的翻译文本。返回值是一个问候语，根据请求中的 `Accept-Language` 头或查询参数的语言。

## 使用场景

### 一、使用中间件来确定语言

您可以使用中间件来分析 HTTP 请求并确定用户偏好的语言。`i18next-http-middleware` 已经提供这样的机制。

在 `main.ts` 中配置中间件：

```typescript
// main.ts
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import i18next from 'i18next';
import middleware from 'i18next-http-middleware';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  i18next.use(middleware.LanguageDetector).init({
    detection: {
      // 配置语言检测的选项
    },
  });

  app.use(middleware.handle(i18next));

  await app.listen(3000);
}
bootstrap();

```

在这里，我们向 i18next 初始化函数添加了一个语言探测器，并配置了中间件来自动处理语言检测逻辑。

### 二、提供地区特定的内容

在实际情况中，您可能需要根据用户的地区提供特定的内容。这时，可以通过更复杂的键和语言文件的结构来实现。

例如，您想要提供美国英语和英国英语的不同内容：

`/locales/en-US.json`

```json
{
  "SPELLING": "Color"
}

```

`/locales/en-GB.json`

```json
{
  "SPELLING": "Colour"
}

```

然后，您可以根据提取到的地区码来调用 `i18n.translate` 方法。

## 总结

在此，我们通过一个简单的例子展示了 NestJS 如何支持 i18n。重要的步骤包括安装所需要的库，配置 i18n 模块，创建语言文件，并用 i18n 服务来获取正确的翻译文本。国际化是一个连续的过程，并非一次性的任务。随着创建的内容和应用的用户群体的增长，我们需要不断调整和增添翻译文件来适应新的需要。


在当今全球化的互联网环境下，为软件添加国际化（Internationalization，通常简称为i18n）支持变得至关重要。NestJS作为一个现代、功能丰富的Node.js框架，提供了强大的国际化机制。本文将指导您如何在NestJS项目中实现i18n功能。i18n是国际化的缩写，数字18代表起始字母"I"和结束字母"n"之间的字母数。在NestJS中实现i18n意味着您的应用可以支持多种语言，

NestJS 如何支持国际化（i18n）

## 前言

随着互联网应用的全球化发展，多语言支持（国际化，Internationalization，简称 i18n）成为现代前端开发中不可或缺的一部分。React 作为主流的前端框架，如何优雅地实现多语言切换？本文将以 **i18next** 这个流行的国际化库为例，详细讲解如何在 React 项目中实现多语言支持。

---

## 什么是 i18next？

i18next 是一个功能强大且灵活的国际化框架，支持多种前端和后端环境。它提供了语言资源管理、语言切换、占位符替换、格式化等丰富功能。配合 React 的绑定库 `react-i18next`，可以非常方便地在 React 应用中实现多语言。

---

## 准备工作

- 确保你有一个基于 React 的项目（使用 Create React App、Vite 或其他脚手架均可）
- 熟悉 React 基础知识
- 对 JavaScript 模块有基本了解

---

## 安装依赖

在项目根目录打开终端，执行以下命令安装 i18next 和 react-i18next：

```bash
npm install i18next react-i18next
```

或使用 yarn：

```bash
yarn add i18next react-i18next
```

---

## 创建语言资源文件

语言资源文件是存放不同语言文本的 JSON 文件，通常按语言代码分类。

项目结构示例：

```
src/
  locales/
    en/
      translation.json
    zh/
      translation.json
```

- `en/translation.json`（英文）

```json
{
  "welcome": "Welcome to React",
  "description": "This is a simple internationalization example."
}
```

- `zh/translation.json`（中文）

```json
{
  "welcome": "欢迎使用 React",
  "description": "这是一个简单的国际化示例。"
}
```

---

## 初始化 i18next

在 `src` 目录下创建 `i18n.js` 文件，负责初始化 i18next。

```javascript
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

// 导入语言资源
import enTranslation from './locales/en/translation.json';
import zhTranslation from './locales/zh/translation.json';

i18n
  .use(initReactI18next) // 让 i18next 绑定 React
  .init({
    resources: {
      en: {
        translation: enTranslation,
      },
      zh: {
        translation: zhTranslation,
      },
    },
    lng: 'zh', // 默认语言
    fallbackLng: 'en', // 如果当前语言资源不存在，回退到英文
    interpolation: {
      escapeValue: false, // React 已经安全处理了 XSS
    },
  });

export default i18n;
```

---

## 在 React 中使用 i18next

### 1. 在入口文件中引入 i18n

一般在 `src/index.js` 或 `src/main.jsx` 中引入：

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n'; // 引入 i18n 配置

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
```

### 2. 使用 `useTranslation` 钩子

在任何组件中，可以通过 `useTranslation` 获取翻译函数 `t`。

示例 `App.js`：

```javascript
import React from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  // 切换语言函数
  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div style={{ padding: 20 }}>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>

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

export default App;
```

---

## 进阶功能

### 1. 动态插值

i18next 支持动态变量替换，比如：

```json
{
  "greeting": "Hello, {{name}}!"
}
```

React 组件中：

```javascript
<p>{t('greeting', { name: 'Alice' })}</p>
```

输出：

```
Hello, Alice!
```

### 2. 语言检测和持久化

可以集成 `i18next-browser-languagedetector` 插件，自动检测用户浏览器语言，提升体验。

安装：

```bash
npm install i18next-browser-languagedetector
```

修改 `i18n.js`：

```javascript
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    // ...其他配置
  });
```

这样，i18next 会自动检测浏览器语言并使用。

### 3. 多命名空间支持

大型项目可能会将翻译拆分为多个命名空间，方便管理。

资源示例：

```
locales/en/common.json
locales/en/home.json
```

初始化时配置多个命名空间：

```javascript
i18n.init({
  ns: ['common', 'home'],
  defaultNS: 'common',
  resources: {
    en: {
      common: { /* ... */ },
      home: { /* ... */ },
    },
    zh: {
      common: { /* ... */ },
      home: { /* ... */ },
    },
  },
});
```

使用时指定命名空间：

```javascript
const { t } = useTranslation('home');
```

---

## 总结

通过以上步骤，你已经掌握了如何在 React 项目中使用 i18next 实现多语言国际化：

- 安装并配置 i18next 和 react-i18next
- 准备语言资源文件
- 初始化 i18next，绑定 React
- 使用 `useTranslation` 钩子实现文本翻译和语言切换
- 掌握动态插值、语言检测、多命名空间等进阶功能


随着互联网应用的全球化发展，多语言支持（国际化，Internationalization，简称i18n）成为现代前端开发中不可或缺的一部分。React作为主流的前端框架，如何优雅地实现多语言切换？本文将以i18next这个流行的国际化库为例，详细讲解如何在React项目中实现多语言支持。什么是i18next？i18next是一个功能强大且灵活的国际化框架，支持多种前端和后端环境。它提供了语言资源管

React 支持多语言国际化 -- i18next

客户端

算法

工程

产品

信息安全

运维

i18next 是一个功能齐全的 i18n javascript 库，用于翻译您的 Web 应用程序。