React i18n Without
Leaving Your Terminal
Manage translations for React and Next.js from the command line. Works with react-i18next, react-intl, and other popular libraries.
React i18n Challenges
React's ecosystem offers many i18n options—react-i18next, react-intl, lingui—each with different file formats and conventions. Managing translation files across these libraries, keeping them in sync with your components, and integrating with your deployment pipeline requires careful coordination.
Common Challenges
- • Forgetting to add keys for new UI text
- • JSON files growing unwieldy as apps scale
- • Merge conflicts in large translation files
- • No visibility into missing translations
With LangCTL
- ✓ Automatic detection of translation function calls
- ✓ Organize keys by feature or namespace
- ✓ Smaller files reduce merge conflicts
- ✓ Clear status of translation completeness
React i18n Workflow
Initialize in Your React Project
LangCTL detects your i18n library (react-i18next, react-intl, etc.) and configures appropriate defaults.
Scan Your Components
LangCTL scans your React components for translation calls—t(), useTranslation(), FormattedMessage, and more.
Manage Translations
Add translations via CLI or edit JSON files directly. LangCTL supports namespaced keys and nested structures common in React apps.
Sync and Deploy
Push changes to sync with your team. Pull before builds to ensure you have the latest translations.
Works With Your i18n Library
react-i18next
The most popular React i18n solution. Full support for namespaces, nested keys, and interpolation.
- ✓ t() function detection
- ✓ useTranslation hook
- ✓ Trans component
- ✓ Namespace support
react-intl
FormatJS integration for React. Supports ICU message format and all react-intl APIs.
- ✓ FormattedMessage
- ✓ useIntl hook
- ✓ defineMessages
- ✓ ICU format
Next.js
Works with Next.js built-in i18n routing and popular Next.js i18n solutions.
- ✓ next-i18next
- ✓ next-intl
- ✓ App Router support
- ✓ Server components
Fits Your React Code
Write React components normally. LangCTL detects translation keys automatically.
Your Component
function Dashboard() {
const { t } = useTranslation();
return (
<div>
<h1>{t("dashboard.title")}</h1>
<p>{t("dashboard.welcome", { name })}</p>
</div>
);
}LangCTL Detects
$ langctl scan
Keys found in Dashboard.tsx:
- dashboard.title
- dashboard.welcome
Parameters detected:
- dashboard.welcome: {{ name }}CI/CD Ready
Add translation checks to your React build pipeline. Works with Vercel, Netlify, GitHub Actions, and any CI system.
Start Managing React Translations Today
Free to get started. Works with any React project.