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
- ✓ New source strings uploaded with one command (
langctl push) - ✓ Organize keys by feature or namespace
- ✓ Smaller files reduce merge conflicts
- ✓ Clear status of translation completeness per language
React i18n Workflow
Initialize in Your React Project
langctl init asks for your API key, then lets you pick the project, the file format (flat JSON works with react-i18next and react-intl) and where the files go. It writes a langctl.json you commit.
Push Your Source Strings
Add new keys to your source-language file as you build components, then upload them. By default only new keys are added — existing translations are never overwritten.
Manage Translations
Translators work in the dashboard, or add translations from the CLI. langctl writes flat or nested JSON, whichever your React app uses.
Sync and Deploy
Pull before builds to get the latest published translations. Drafts stay out of your app until someone publishes them.
Works With Your i18n Library
react-i18next
The most popular React i18n solution. Full support for namespaces, nested keys, and interpolation.
- ✓ Flat JSON (
json) out of the box - ✓ {{interpolation}} kept as-is
- ✓ One file per language
- ✓ Namespaces via path templates
react-intl
FormatJS for React. Load the pulled JSON as your messages object.
- ✓ Flat JSON message files
- ✓ ICU messages written as-is
- ✓ FormattedMessage & useIntl
- ✓ One file per locale
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 keeps the JSON files they read in sync.
Your Component
function Dashboard() {
const { t } = useTranslation();
return (
<div>
<h1>{t("dashboard.title")}</h1>
<p>{t("dashboard.welcome", { name })}</p>
</div>
);
}src/locales/es.json (from langctl pull)
{
"dashboard.title": "Panel",
"dashboard.welcome": "Bienvenido, {{name}}"
}CI/CD Ready
Add translation checks to your React build pipeline. Works with Vercel, Netlify, GitHub Actions, and any CI system.
langctl pull to prebuildStart Managing React Translations Today
Free to get started. Works with any React project.