skills.rest
Chenm4
Chenm4COMMUNITY
Explore all skills by this author →
GitHub

i18n

Standardize react-i18next translation keys and locale data in React apps.

Updated Feb 1, 2026
Search Tags:#react#localization#translation#i18n#languages#keys#react-i18next
One-click install
npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill i18n-chenm4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/Chenm4/VoiceChatAssistant/tree/main/lobehub-main/.agents/skills/i18n
Command: npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill i18n-chenm4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing translations and locale data across React components is error-prone and leads to duplicated keys and inconsistent UI text. This guide provides a standardized approach to i18n with react-i18next, ensuring consistent keys, namespaces, and workflow.

Core Features & Use Cases

  • Standardized translation keys using flat dot notation for React components.
  • Centralized locale files under src/locales/default and a consistent export workflow.
  • Guidance for adding new languages, maintaining keys, and applying translations across components.

Quick Start

Add a new language namespace to src/locales/default, create dot-notation keys in the appropriate namespace, and run pnpm i18n to generate translations; use useTranslation('namespace') in components to fetch keys.

Frequently Asked Questions about i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage React translations without duplicating keys across components?▼

To manage React translations without duplicating keys, standardize your i18n workflow by centralizing locale files under src/locales/default and using flat dot-notation for translation keys. This ensures consistent UI text and simplifies applying translations across components.

What is the best way to add a new language to a react-i18next project?▼

The best way to add a new language in react-i18next is to add a new language namespace to the centralized src/locales/default directory, create your dot-notation keys, and run pnpm i18n to generate the language bundles for your components.

How do I structure translation keys for react-i18next?▼

Structure translation keys for react-i18next using flat dot notation within centralized locale files. Organize these keys into default namespaces under src/locales and export them consistently through an index.ts file to maintain a standardized workflow.

Does this i18n workflow require a build step to generate translations?▼

Yes, this i18n workflow requires a build step to generate translations. You must run pnpm i18n to generate language bundles from your centralized src/locales/default namespaces before fetching the keys in components using useTranslation.

How do I fetch translation keys in my React components after setting up locales?▼

To fetch translation keys in React components, use the useTranslation hook provided by react-i18next. Call useTranslation('namespace') in your component to retrieve the standardized dot-notation keys generated from your locale files.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

i18n-react-rules

Configure react-i18next with language detection and namespace translation files for React Vite SPAs.

Community
Intermediate
NNPopovNNPopov
2

flutter-localizing-apps

Configure Flutter app localization with ARB files and locale delegates.

Community
Intermediate
andershi666andershi666
1

i18n

Automate React translation management with flat dot-notation keys and locale exports.

Community
Intermediate
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate