前端国际化方案 - i18next

当应用需要面向不同语言地区的用户时，国际化（i18n）是提升用户体验的关键，而 i18next 作为一款成熟的国际化框架，能帮我们高效实现多语言切换与内容适配。

国际化的英文单词 "Internationalization" 太长，人们取首字母 "i" 和末字母 "n"，并在两者之间插入中间的 18 个字母来形成这个缩写 🤪

流程总结

简单总结一下前端项目中使用 i18next 实现国际化的核心流程：

准备多语言资源文件：创建对应不同语言的 JSON 文件，按业务模块整理键值对形式的翻译内容
初始化 i18next 配置：引入框架及依赖，配置默认语言、资源路径等核心参数
在代码中使用翻译内容：通过框架提供的 Hook 获取翻译函数，实现文本的多语言渲染
实现语言切换功能：根据设计需求提供语言切换入口，动态更新应用语言

详细实现步骤

1. 安装依赖

首先安装核心依赖包（以 React/Next 项目为例）：

bash 复制代码

pnpm add i18next react-i18next i18next-http-backend

i18next：核心国际化框架
react-i18next：React 适配层，提供 Hook 等 React 特性
i18next-http-backend：用于加载远程语言资源文件

2. 初始化 i18next 配置

创建配置文件（如i18n.js）并初始化框架：

ts 复制代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
	// 从指定路径加载语言文件
	// public/locales/{lng}/translation.json
	.use(Backend)
	// i18n将i18实例传递给react-i18next
	.use(initReactI18next)
	.init({
		// 默认语言
		lng: 'en',
		// 备用语言，如果默认语言不存在，则使用备用语言
		fallbackLng: 'en',
		interpolation: {
			// 不使用转义
			escapeValue: false,
		},
	});

export default i18n;

3. 引入 i18n 配置

在项目入口文件中导入配置，使其生效（以 Next.js 为例, 可以在layout.ts中导入）：

ts 复制代码

import "./i18n";

4. 配置翻译文件

创建语言资源文件目录结构，遵循

public/locales/{语言代码}/translation.json 的路径规则：

翻译文件内容示例（注意必须保持 key 的一致性）：

json 复制代码

// en
{
	"home": {
		"title": "Home"
	},
	"about": {
		"title": "About"
	}
}

json 复制代码

// zh
{
  "home": {
    "title": "首页"
  },
  "about": {
    "title": "关于"
  }
}

5. 在组件中使用翻译

通过useTranslation Hook 获取翻译函数，实现多语言文本渲染：

tsx 复制代码

'use client';
import { useTranslation } from 'react-i18next';

export default function Home() {

  const { t } = useTranslation();

  return (
    <div>
      {t('home.title')} 
      {t('about.title')} 
      
     <div>
        <button onClick={() => i18n.changeLanguage('zh')}>
          Switch
        </button>
      </div>
    </div>
  );
}

6. 与后端交互的国际化处理

为了让后端也能返回对应语言的内容，可以在请求头中携带当前语言信息：

tsx 复制代码

{'Accept-Language', i18n.language}

这样后端就能就能根据请求头返回对应语言的响应内容，实现前后端协同的完整国际化方案。

实际上，i18next还提供诸如插值语法可以更好的适配页面内容。具体可以参考文档：www.i18next.com/translation...