\n \n

\n );\n}\n```\n\n## Next Steps\n\n- **Framework-specific guides**: [Next.js](./frameworks/nextjs-app-router), [React Router](./frameworks/react-router-v6), [Vite](./frameworks/vite-react-ts)\n- **How it Works**: [Understanding build-time processing](./how-it-works)\n- **Advanced Configuration**: [Customization options](./configuration/advanced)\n","content","\n**Lingo.dev Compiler** is designed to make any React app multilingual at build time without requiring changes to existing React components.\n\nThis quick start guide will help you add multilingual support to your React app in under 5 minutes.\n\nUpon completion of this guide, you will:\n\n1. Install and configure **Lingo.dev Compiler** in your React app\n2. Set up automated translation extraction and injection\n3. Have a working multilingual app with optimized translations\n\nLet's begin!\n\n## Prerequisites\n\n**Lingo.dev Compiler** works with modern React frameworks. Before starting, ensure you have one of the supported setups:\n\n- **Next.js** (App Router)\n- **React Router** / **Remix**\n- **Vite + React**\n\nOr explore our demo apps: [Next.js](https://github.com/lingodotdev/lingo.dev/tree/main/demo/next-app), [React Router](https://github.com/lingodotdev/lingo.dev/tree/main/demo/react-router-app), and [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project).\n\n## Step 1. Install the Package\n\nInstall the **lingo.dev** package in your project:\n\n```bash\nnpm install lingo.dev\n```\n\n## Step 2. Configure Your Framework\n\nChoose your framework and follow the specific setup:\n\n### Next.js\n\nUpdate your `next.config.js`:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default lingoCompiler.next({\n sourceLocale: \"en\",\n targetLocales: [\"es\", \"fr\", \"de\"],\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})(nextConfig);\n```\n\n### React Router / Remix\n\nUpdate your `vite.config.ts`:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\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 // },\n })(viteConfig),\n);\n```\n\n### Vite\n\nUpdate your `vite.config.ts`:\n\n```js\nimport lingoCompiler from \"lingo.dev/compiler\";\n\nexport default defineConfig(() =>\n lingoCompiler.vite({\n sourceRoot: \"src\",\n targetLocales: [\"es\", \"fr\", \"de\"],\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 })(viteConfig),\n);\n```\n\n## Step 3. Set Up Authentication\n\n**Lingo.dev Compiler** sends your content to AI translation engines for localization, so we need to authenticate first.\n\n### Option 1. Lingo.dev Engine\n\n**Lingo.dev Compiler** can use **Lingo.dev Engine** as your AI translation engine.\n\nIt provides dynamic model selection, auto-routing to different models for each language pair, automated model fallbacks, translation memory that considers past translations, and glossary support for your project's domain-specific terminology. There are both free and paid options, and the free Hobby tier should be sufficient for most projects.\n\nTo authenticate, run:\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**Important detail.** If you're using Brave browser, or your browser extensions are blocking the authentication flow, you can manually authenticate by adding a `LINGODOTDEV_API_KEY` environment variable to your `.env` file:\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\nYou will find the token in the **Lingo.dev Engine** Project Settings.\n\n### Option 2. Alternative LLM Provider\n\nAlternatively, you can use models from one of [the supported LLM providers](/compiler/how-it-works#option-2-alternative-llm-providers):\n\n- [GROQ](https://groq.com/)\n- [Google AI](https://aistudio.google.com/)\n- [OpenRouter](https://openrouter.ai/)\n- [Ollama](https://ollama.com/)\n- [Mistral](https//mistral.ai)\n\nAdd your API key for your configured LLM provider to your environment:\n\n```bash\n# .env\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**Note:** Make sure to activate your account with LLM provider and accept their Terms of service before using it in Compiler.\n\n## Step 4. Add the Provider\n\nWrap your app with the **LingoProvider** to enable translations:\n\n### Next.js\n\nIn your `layout.tsx`:\n\n```tsx\nimport { LingoProvider, loadDictionary } from \"lingo.dev/react/rsc\";\n\nexport default function Layout({ children }) {\n return (\n loadDictionary(locale)}>\n \n {children}\n \n \n );\n}\n```\n\n### React Router / Remix\n\nIn your `root.tsx`:\n\n```tsx\nimport { LingoProvider } from \"lingo.dev/react/client\";\nimport { loadDictionary } from \"lingo.dev/react/react-router\";\n\nexport async function loader(args) {\n return { lingoDictionary: await loadDictionary(args.request) };\n}\n\nexport default function Root() {\n const { lingoDictionary } = useLoaderData();\n return (\n \n \n \n \n \n \n \n );\n}\n```\n\n### Vite\n\nIn your `main.tsx`:\n\n```tsx\nimport { LingoProviderWrapper, loadDictionary } from \"lingo.dev/react/client\";\n\nReactDOM.createRoot(document.getElementById(\"root\")).render(\n loadDictionary(locale)}>\n \n ,\n);\n```\n\n## Step 5. Build and Test\n\nRun your development server:\n\n```bash\nnpm run dev\n```\n\nThe compiler will automatically:\n\n1. Scan your React components for translatable text\n2. Extract translation keys\n3. Generate translations using AI\n4. Create optimized translation files in the `lingo/` directory\n\nYour app is now multilingual! The compiler creates versioned dictionaries that track content changes and only retranslates modified content.\n\n## Optional: Add Language Switcher\n\nAdd a language switcher to let users change languages:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n

Quick Start