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

Ready to run

npx skills add https://github.com/Chenm4/VoiceChatAssistant --skill i18n-chenm4

💬 Prompt for ChatGPT / Claude Chat▼

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.