I18n

by lobehub6a3eba96b010No license83K starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Use for user-facing strings and react-i18next locale keys, namespaces, interpolation, translations or bun run i18n.

Instructions onlySoftware Development

AI-generated overview

Guides adding and managing react-i18next locale keys and namespaces in the LobeHub codebase.

What it does: This skill documents conventions for user-facing strings in a react-i18next project: flat dot-notation keys, namespace organization, interpolation with double braces, and avoiding key conflicts. It describes the workflow of adding keys to the default locale source files, exporting namespaces, and letting an automated daily workflow generate other locales. It also covers translation usage in components and lists the project's common namespaces.
When to use it: Use it when adding, editing, or reviewing user-facing strings and locale keys in this codebase. It is also relevant when working with namespaces, interpolation, or the project's translation generation workflow.
Requirements: Requires the react-i18next framework and the project's locale file layout; manual translation runs use bun run i18n and need an OPENAI_API_KEY. Ships no scripts; instructions only.

LobeHub Internationalization Guide

Default language: English (en-US)
Framework: react-i18next
Only edit files in packages/locales/src/default/ - Never edit JSON files in locales/ (except hand-written en-US/zh-CN previews)
Leave generated locales to the daily auto-i18n.yml workflow by default; run bun run i18n manually only when they are needed immediately

Key Naming Convention

Flat keys with dot notation (not nested objects):

typescript

// ✅ Correctexport default {  'alert.cloud.action': '立即体验',  'sync.actions.sync': '立即同步',  'sync.status.ready': '已连接',};
// ❌ Avoid nested objectsexport default {  alert: { cloud: { action: '...' } },};

// ✅ Correctexport default {  'alert.cloud.action': '立即体验',  'sync.actions.sync': '立即同步',  'sync.status.ready': '已连接',};
// ❌ Avoid nested objectsexport default {  alert: { cloud: { action: '...' } },};

Patterns: {feature}.{context}.{action|status}

Parameters: Use {{variableName}} syntax

Avoid key conflicts:

typescript

// ❌ Conflict'clientDB.solve': '自助解决','clientDB.solve.backup.title': '数据备份',
// ✅ Solution'clientDB.solve.action': '自助解决','clientDB.solve.backup.title': '数据备份',

// ❌ Conflict'clientDB.solve': '自助解决','clientDB.solve.backup.title': '数据备份',
// ✅ Solution'clientDB.solve.action': '自助解决','clientDB.solve.backup.title': '数据备份',

Workflow

Add keys to packages/locales/src/default/{namespace}.ts
Export new namespace in packages/locales/src/default/index.ts
For dev preview: manually translate locales/zh-CN/{namespace}.json and locales/en-US/{namespace}.json
Leave all other locales to .github/workflows/auto-i18n.yml, which runs daily and opens an automated translation PR
Run bun run i18n manually only when the branch needs those translations immediately; it is slow and requires OPENAI_API_KEY

Usage

tsx

import { useTranslation } from 'react-i18next';
const { t } = useTranslation('common');
t('newFeature.title');t('alert.cloud.desc', { credit: '1000' });
// Multiple namespacesconst { t } = useTranslation(['common', 'chat']);t('common:save');

import { useTranslation } from 'react-i18next';
const { t } = useTranslation('common');
t('newFeature.title');t('alert.cloud.desc', { credit: '1000' });
// Multiple namespacesconst { 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

Source and attribution

Source:lobehub/lobehubin.agents/skills/i18nat commit6a3eba9

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

I18n

LobeHub Internationalization Guide

Key Naming Convention

Workflow

Usage

Common Namespaces

Source and attribution

More from lobehub/lobehub

Store Data Structures

Typescript

React

Project Overview

Pr

Linear

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices