I18N Implementation Guide

This project has been set up with internationalization (i18n) using the i18next and react-i18next libraries.

Structure

src/i18n/index.ts - Main i18n configuration
src/locales/en.js - English translations
src/locales/zh.js - Chinese translations
src/hooks/useTranslation.ts - Custom hook combining react-i18next with our locale store
src/components/LanguageSwitcher/index.tsx - Language switcher component

How to Use

Basic Translation

tsx

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

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

Advanced Usage with Parameters

tsx

import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';

const MyComponent = () => {
  const { t } = useTranslation();
  const currentDate = dayjs();

  return <div>{t('myMessage', { ts: currentDate })}</div>;
};

Changing Languages

tsx

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { i18n } = useTranslation();

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

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

Using Our Custom Hook

Our custom hook combines i18next with our Zustand store:

tsx

import useTranslation from '@/hooks/useTranslation';

const MyComponent = () => {
  const { t, locale, toggleLocale, isZh, isEn } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <button onClick={toggleLocale}>
        {isZh ? 'Switch to English' : '切换到中文'}
      </button>
    </div>
  );
};

Adding New Translations

Add your new translation keys to both src/locales/en.js and src/locales/zh.js
Follow the same format as existing translations
Use the keys in your components with t('yourNewKey')

Language Switcher

The language switcher component is available at src/components/LanguageSwitcher/index.tsx and can be imported and used anywhere in the application.

tsx

import LanguageSwitcher from '@/components/LanguageSwitcher';

const MyComponent = () => {
  return (
    <div>
      <h1>My Page</h1>
      <LanguageSwitcher />
    </div>
  );
};