如何在React中添加阿语、法语并通过Next.js实现文本翻译？

一、添加阿拉伯语、法语多语言支持 #

1. 配置Next.js国际化设置 #

在项目根目录的next.config.js中添加i18n配置，指定支持的语言列表、默认语言：

/** @type {import('next').NextConfig} */
const nextConfig = {
  i18n: {
    locales: ['en', 'ar', 'fr'], // 支持英语、阿拉伯语、法语
    defaultLocale: 'en',
    localeDetection: false, // 关闭自动语言检测（可选）
  },
}

module.exports = nextConfig

2. 改造Language切换组件 #

替换原二元切换逻辑，改为支持多语言选择的下拉交互，同时保留RTL/LTR排版切换逻辑：

import Image from 'next/image'
import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";

function Language() {
  const { pathname, locale, push, asPath } = useRouter();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  
  // 定义支持的语言元数据
  const supportedLanguages = [
    { code: 'en', name: 'English', flag: '/en.svg', flagDark: '/lang_white.svg', dir: 'ltr' },
    { code: 'ar', name: 'العربية', flag: '/ar.svg', flagDark: '/ar_white.svg', dir: 'rtl' },
    { code: 'fr', name: 'Français', flag: '/fr.svg', flagDark: '/fr_white.svg', dir: 'ltr' },
  ];

  const currentLang = supportedLanguages.find(lang => lang.code === locale);

  // 同步文档排版方向
  useEffect(() => {
    if (!currentLang) return;
    document.dir = currentLang.dir;
    document.body.classList.toggle("ltr", currentLang.dir === 'ltr');
    document.body.classList.toggle("rtl", currentLang.dir === 'rtl');
  }, [currentLang]);

  // 切换语言方法
  const switchLanguage = (targetLang) => {
    document.dir = targetLang.dir;
    document.body.classList.toggle("ltr", targetLang.dir === 'ltr');
    document.body.classList.toggle("rtl", targetLang.dir === 'rtl');
    push(pathname, asPath, { locale: targetLang.code });
    setIsDropdownOpen(false);
  };

  return (
    <div className="language relative">
      {/* 当前语言触发按钮 */}
      <div 
        className="lan__country active flex items-center cursor-pointer px-3 py-2" 
        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
      >
        <div className="flag mr-2">
          <div className="dark-none">
            <Image src={currentLang?.flag} width="20" height="20" alt={`${currentLang?.name} flag`} className='dark-none' />
          </div>
          <div className="d-none dark-show">
            <Image src={currentLang?.flagDark} width="20" height="20" alt={`${currentLang?.name} flag`} className='d-none dark-show' />
          </div>
        </div>
        <span>{currentLang?.name}</span>
      </div>

      {/* 多语言下拉菜单 */}
      {isDropdownOpen && (
        <div className="absolute top-full right-0 left-0 bg-white dark:bg-gray-800 shadow-md rounded-md mt-1 z-10">
          {supportedLanguages
            .filter(lang => lang.code !== locale)
            .map(lang => (
              <div
                key={lang.code}
                className="lan__country flex items-center cursor-pointer px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
                onClick={() => switchLanguage(lang)}
              >
                <div className="flag mr-2">
                  <div className="dark-none">
                    <Image src={lang.flag} width="20" height="20" alt={`${lang.name} flag`} className='dark-none' />
                  </div>
                  <div className="d-none dark-show">
                    <Image src={lang.flagDark} width="20" height="20" alt={`${lang.name} flag`} className='d-none dark-show' />
                  </div>
                </div>
                <span>{lang.name}</span>
              </div>
            ))}
        </div>
      )}
    </div>
  )
}

export default Language

3. 准备语言资源文件 #

在项目根目录创建public/locales文件夹，为每种语言创建翻译JSON文件：

• public/locales/en.json（英语）

{
  "home": "Home",
  "about": "About Us",
  "contact": "Contact Us"
}

• public/locales/ar.json（阿拉伯语）

{
  "home": "الرئيسية",
  "about": "معلومات عنا",
  "contact": "اتصل بنا"
}

• public/locales/fr.json（法语）

{
  "home": "Accueil",
  "about": "À propos de nous",
  "contact": "Nous contacter"
}

二、实现阿拉伯语与英语文本翻译功能 #

1. 集成翻译工具 #

使用next-i18next（Next.js官方推荐的国际化方案）加载翻译文件，先安装依赖：

npm install next-i18next

2. 配置next-i18next #

在项目根目录创建next-i18next.config.js：

module.exports = {
  i18n: {
    locales: ['en', 'ar', 'fr'],
    defaultLocale: 'en',
  },
  localePath: './public/locales',
}

3. 在页面/组件中使用翻译 #

在页面或组件中导入useTranslation钩子实现文本翻译（Pages Router需预加载翻译文件）：

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

// 服务端预加载翻译文件（仅Pages Router需要）
export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
    },
  };
}

function HomePage() {
  const { t } = useTranslation('common');
  
  return (
    <div className={locale === 'ar' ? 'rtl' : 'ltr'}>
      <h1>{t('home')}</h1>
      <nav>
        <a href="/about">{t('about')}</a>
        <a href="/contact">{t('contact')}</a>
      </nav>
    </div>
  );
}

export default HomePage;

4. 适配RTL样式 #

补充CSS确保RTL布局正常：

.rtl {
  direction: rtl;
  text-align: right;
}

.ltr {
  direction: ltr;
  text-align: left;
}

.rtl .nav-link {
  margin-left: 0;
  margin-right: 1rem;
}

内容的提问来源于stack exchange，提问作者Ahsan Roomi