
i18n
BeliebtInternationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
Internationalization guide using react-i18next. Use when adding translations, creating i18n keys, or working with localized text in React components (.tsx files). Triggers on translation tasks, locale management, or i18n implementation.
LobeChat Internationalization Guide
- Default language: Chinese (zh-CN)
- Framework: react-i18next
- Only edit files in
src/locales/default/- Never edit JSON files inlocales/ - Run
pnpm i18nto generate translations (or manually translate zh-CN/en-US for dev preview)
Key Naming Convention
Flat keys with dot notation (not nested objects):
// ✅ Correct
export default {
'alert.cloud.action': '立即体验',
'sync.actions.sync': '立即同步',
'sync.status.ready': '已连接',
};
// ❌ Avoid nested objects
export default {
alert: { cloud: { action: '...' } },
};
Patterns: {feature}.{context}.{action|status}
Parameters: Use {{variableName}} syntax
'alert.cloud.desc': '我们提供 {{credit}} 额度积分',
Avoid key conflicts:
// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',
// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',
Workflow
- Add keys to
src/locales/default/{namespace}.ts - Export new namespace in
src/locales/default/index.ts - For dev preview: manually translate
locales/zh-CN/{namespace}.jsonandlocales/en-US/{namespace}.json - Run
pnpm i18nto generate all languages (CI handles this automatically)
Usage
import { useTranslation } from 'react-i18next';
const { t } = useTranslation('common');
t('newFeature.title')
t('alert.cloud.desc', { credit: '1000' })
// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save')
Common Namespaces
Most used: common (shared UI), chat (chat features), setting (settings)
Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic
You Might Also Like
Related Skills

verify
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
facebook
test
Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.
facebook
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
facebook
extract-errors
Use when adding new error messages to React, or seeing "unknown error code" warnings.
facebook