skills.rest
samiabid
samiabidCOMMUNITY
Explore all skills by this author →
GitHub

i18n

Standardizes translation key naming and workflow for React apps using react-i18next.

Updated Aug 27, 2026
Search Tags:#frontend#localization#i18n#translations#namespace#react-i18next
One-click install
npx skills add https://github.com/samiabid/lobehub-railway --skill i18n-samiabid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/samiabid/lobehub-railway/tree/main/.agents/skills/i18n
Command: npx skills add https://github.com/samiabid/lobehub-railway --skill i18n-samiabid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers implement and maintain internationalization in React applications by providing a clear, repeatable workflow with react-i18next.

Core Features & Use Cases

  • Key naming conventions: guidance on flat keys using dot notation for consistent translation keys.
  • Namespace management: organize translations under namespaces and export them for runtime use.
  • Workflow: from adding keys in src/locales/default/{namespace}.ts to exporting new namespaces and generating localized JSON via pnpm i18n for dev preview.
  • Usage: examples for how to use the provided t function in components (.tsx files) and how to manage locale switching.

Quick Start

  • Add translations to src/locales/default/{namespace}.ts and corresponding zh-CN/en-US JSON files for dev preview.
  • Run pnpm i18n to generate all languages.

Frequently Asked Questions about i18n

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

FAQPage Schema
How do I add translations to a React app with react-i18next?▼

React-i18next enables translation management by organizing keys in namespace files under src/locales/default/, then exporting them across language directories. Define your translation keys using dot notation, run pnpm i18n to generate localized JSON files, and use the t function in components to display translated content.

What's the best way to organize translation keys and namespaces?▼

Namespace organization groups related translations logically, reducing key conflicts and improving maintainability. Use flat keys with dot notation (e.g., common.welcome, nav.home) in TypeScript namespace files, then export each namespace separately so react-i18next can load translations efficiently at runtime.

Can I use react-i18next for frontend localization across multiple languages?▼

Yes, react-i18next standardizes frontend localization workflows across languages. Define translations in src/locales/{language}/{namespace}.json, manage locale switching in components, and generate all language variants through the pnpm i18n build command for consistent multi-language support.

How do I set up and maintain a translation workflow in React?▼

The workflow starts by adding translation keys to src/locales/default/{namespace}.ts, creating corresponding JSON files for each language, then running pnpm i18n to generate localized resources. Components access translations via the t function, enabling dynamic locale switching and centralized key management.

What are the naming conventions for translation keys in i18n?▼

Translation keys use flat dot notation to organize hierarchically within namespaces, improving readability and preventing naming collisions. For example, use common.button.submit or nav.menu.home instead of deeply nested structures, making keys predictable and easier to maintain across your translation files.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

i18n

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

Official
Intermediate
mattmacleod16-svgmattmacleod16-svg
1

vscode-ext-localization

Localize VS Code extension configurations, walkthroughs, and bundle strings.

Community
Intermediate
jaredlanderjaredlander

javascript-react

Write type-safe React components with TypeScript props and hooks.

Community
Advanced
KaakatiKaakati
2

i18n

Implement internationalization and localization for Rails, React Native, ReactJS, and Next.js applications.

Community
Advanced