Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**Requirements for extraction:**\n\n1. Replace hardcoded strings with react-intl hooks and components\n2. Use ICU formatting for variables and plurals\n3. Structure keys hierarchically by component organization\n4. Add all keys to the source JSON file\n5. Maintain consistent naming conventions\n\n**AI prompt:**\n\n```\nExtract all hardcoded strings from React components and:\n\n1. Replace with react-intl:\n - Use useIntl hook for dynamic strings\n - Use FormattedMessage for static text\n - Add ICU formatting for variables ({name}) and plurals ({count})\n\n2. Structure translation keys:\n - Group by component hierarchy (components.*, pages.*)\n - Use descriptive, nested keys (header.nav.home)\n - Match component structure in JSON\n\n3. Update locales:\n - Add all keys to src/locales/en.json\n - Maintain consistent naming across app\n```\n\n**After AI extraction:**\n\n```jsx\nimport { useIntl } from \"react-intl\";\n\nfunction WelcomeCard() {\n const intl = useIntl();\n\n return (\n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

\n );\n}\n```\n\n**Generated en.json:**\n\n```json\n{\n \"welcome.title\": \"Welcome to our platform\",\n \"welcome.description\": \"Start your journey with us today\",\n \"welcome.getStarted\": \"Get started\"\n}\n```\n\n## Batch Processing\n\nFor multiple components, select all files and use the same comprehensive prompt. AI IDEs like Cursor, GitHub Copilot, and others can process multiple files simultaneously, maintaining consistent key naming across your application.\n\n## Translation Generation\n\nOnce your AI IDE extracts the keys, generate translations:\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\nThis creates translated versions of your source file:\n\n```bash\nsrc/locales/\n en.json (source with extracted keys)\n es.json (Spanish translations)\n fr.json (French translations)\n de.json (German translations)\n```\n\n## Validation\n\nAfter extraction, verify your setup:\n\n**Check translation coverage:**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\nThis command fails if any translations are missing, ensuring complete coverage.\n\n**Test with different locales:**\n\n```jsx\n// Switch locale in your app to verify translations work\n\n \n\n```\n","content","\nConverting an existing React app to support multiple languages is sometimes a tedious process of finding hardcoded strings and replacing them with translation keys.\n\n**Lingo.dev CLI** works seamlessly with AI-powered IDEs like Cursor, GitHub Copilot, and similar tools to automate the extraction of translatable content from your React components.\n\nThe concept explained below can be used for any tech stack, but for simplicity and to demonstrate the idea, we'll use a hello world React app as an example.\n\n## Prerequisites\n\nBefore extracting keys, set up basic internationalization in your React app. For complete setup instructions, see the [react-intl documentation](https://formatjs.io/docs/react-intl/).\n\nAfter following the internationalization setup for your tech stack, your project should have:\n\n- Ability to switch between languages dynamically in the app\n- Basic project structure for organizing translation files\n\n## Setup Process\n\n**Install and configure Lingo.dev CLI:**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**Create empty source file:**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**Configure i18n.json:**\n\n```json\n{\n \"locale\": {\n \"source\": \"en\",\n \"targets\": [\"es\", \"fr\", \"de\"]\n },\n \"buckets\": {\n \"json\": {\n \"include\": [\"src/locales/[locale].json\"]\n }\n }\n}\n```\n\n## Extracting Keys with AI\n\n**Select your React component** and use your AI IDE to extract hardcoded strings:\n\n**Before extraction:**\n\n```jsx\nfunction WelcomeCard() {\n return (\n

Welcome to our platform

Start your journey with us today

\n \n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

Extracting i18n Keys with AI