Welcome to our app!

\n Get started by exploring our features and discovering what makes our\n platform special.\n

\n \n

\n );\n}\n```\n\nThat's it! The component will now automatically render in the user's selected language without any code changes.\n\n## Works with Existing Directives\n\nThe `\"use i18n\"` directive naturally works alongside other React directives you might already have:\n\n```tsx\n\"use client\";\n\"use i18n\";\n\nexport function InteractiveComponent() {\n const [count, setCount] = useState(0);\n\n return (\n

Click Counter

You've clicked {count} times

\n \n

\n );\n}\n```\n\n```tsx\n\"use server\";\n\"use i18n\";\n\nexport async function ServerComponent() {\n const data = await fetchData();\n\n return (\n

Server-rendered Content

This content is rendered on the server and localized at build time

\n );\n}\n```\n\nThe compiler intelligently processes all directives together, maintaining the intended behavior of your components while adding localization.\n\n## Development Workflow\n\n### 1. Gradual Migration\n\nStart by adding the directive to individual components:\n\n```tsx\n// Before: English-only component\nexport function Header() {\n return

My Application

;\n}\n\n// After: Multilingual component with one line\n(\"use i18n\");\n\nexport function Header() {\n return

My Application

;\n}\n```\n\n### 2. Hot Module Replacement\n\nThe directive works seamlessly with HMR. When you modify text in a component with `\"use i18n\"`, translations update immediately in your browser:\n\n```tsx\n\"use i18n\";\n\nexport function StatusMessage() {\n return (\n

\n {/* Change this text and see it update in all languages instantly */}\n

Your changes have been saved successfully!

\n );\n}\n```\n\n### 3. File-by-File Approach\n\nPerfect for large codebases where you want to localize incrementally:\n\n```\nsrc/\n├── components/\n│ ├── Header.tsx // ✅ \"use i18n\" - localized\n│ ├── Navigation.tsx // ✅ \"use i18n\" - localized\n│ ├── ProductCard.tsx // ✅ \"use i18n\" - localized\n│ ├── Footer.tsx // ⏳ Not yet localized\n│ └── Sidebar.tsx // ⏳ Not yet localized\n```\n\n## Benefits\n\nThe `\"use i18n\"` directive makes localization as simple as adding a single line to your React components, and is designed for matures projects that require gradual localization.\n\n## Next Steps\n\n- **Quick Start**: [Get started with Lingo.dev Compiler](./quick-start)\n- **How it Works**: [Understanding build-time processing](./how-it-works)\n- **Framework Integration**: [Platform-specific guides](./frameworks/nextjs-app-router)\n- **Advanced Configuration**: [Customization options](./configuration/advanced)\n","content","\nThe **\"use i18n\" directive** enables file-by-file localization of React components without refactoring your existing code. Just like `\"use client\"` or `\"use server\"`, you simply add it at the top of your file to automatically localize all translatable content in that component.\n\nThis approach is perfect for gradually adding multilingual support to large codebases with minimal risk and maximum flexibility.\n\n## How It Works\n\nWhen you add `\"use i18n\"` to the top of a React file, **Lingo.dev Compiler** automatically:\n\n1. **Scans the entire file** for translatable content\n2. **Extracts JSX text** and translatable attributes\n3. **Generates translations** using your configured AI model\n4. **Injects localized versions** at build time\n5. **Maintains Hot Module Replacement** for seamless development\n\nThe directive works at the file level, processing everything within that component's boundaries while leaving the rest of your app unchanged.\n\n## Enable the Directive\n\nTo use the `\"use i18n\"` directive, enable it in your compiler configuration:\n\n```js\n{\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\"],\n useDirective: true, // Enable \"use i18n\" directive\n models: \"lingo.dev\", // Option 1: Lingo.dev Engine\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // Option 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // Option 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // Option 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // Option 2: Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n}\n```\n\n**Note:** When `useDirective` is set to `false` (the default), **Lingo.dev Compiler** processes all files as if they had `\"use i18n\"` at the top. Setting `useDirective: true` gives you granular control to localize files individually.\n\n**Model Configuration:** You can use either [Lingo.dev Engine](/compiler/how-it-works#option-1-lingodev-engine) with simplified syntax (`models: \"lingo.dev\"`) or models from [alternative LLM providers](/compiler/how-it-works#option-2-alternative-llm-providers) with specific model mapping (eg. `models: { \"*:*\": \"groq:mistral-saba-24b\" }`, see above). The Engine automatically selects optimal models for each language pair.\n\n## Basic Usage\n\nAdd the directive at the top of any React component file:\n\n```tsx\n\"use i18n\";\n\nimport React from \"react\";\n\nexport function WelcomeCard() {\n return (\n

Welcome to our app!

\n Get started by exploring our features and discovering what makes our\n platform special.\n

\n \n

Click Counter

You've clicked {count} times

\n \n

\n );\n}\n```\n\n```tsx\n\"use server\";\n\"use i18n\";\n\nexport async function ServerComponent() {\n const data = await fetchData();\n\n return (\n

Server-rendered Content

This content is rendered on the server and localized at build time

My Application

;\n}\n\n// After: Multilingual component with one line\n(\"use i18n\");\n\nexport function Header() {\n return

My Application

\n {/* Change this text and see it update in all languages instantly */}\n

Your changes have been saved successfully!

"use i18n";