\n \n

\n );\n}\n```\n\n## Nächste Schritte\n\n- **Framework-spezifische Anleitungen**: [Next.js](./frameworks/nextjs), [React Router](./frameworks/react-router), [Vite](./frameworks/vite)\n- **Funktionsweise**: [Build-time-Verarbeitung verstehen](./how-it-works)\n- **Erweiterte Konfiguration**: [Anpassungsoptionen](./configuration/advanced)\n","content","\n**Lingo.dev Compiler** ist darauf ausgelegt, jede React-Anwendung zur Build-Zeit mehrsprachig zu machen, ohne dass Änderungen an bestehenden React-Komponenten erforderlich sind.\n\nDiese Schnellstartanleitung hilft Ihnen, in weniger als 5 Minuten mehrsprachige Unterstützung zu Ihrer React-Anwendung hinzuzufügen.\n\nNach Abschluss dieser Anleitung werden Sie:\n\n1. **Lingo.dev Compiler** in Ihrer React-Anwendung installieren und konfigurieren\n2. Automatisierte Übersetzungsextraktion und -injektion einrichten\n3. Eine funktionierende mehrsprachige Anwendung mit optimierten Übersetzungen haben\n\nLassen Sie uns beginnen!\n\n## Voraussetzungen\n\n**Lingo.dev Compiler** funktioniert mit modernen React-Frameworks. Stellen Sie vor dem Start sicher, dass Sie eines der unterstützten Setups haben:\n\n- **Next.js** (App Router)\n- **React Router** / **Remix**\n- **Vite + React**\n\nOder erkunden Sie unsere 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) und [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project).\n\n## Schritt 1. Paket installieren\n\nInstallieren Sie das **lingo.dev**-Paket in Ihrem Projekt:\n\n```bash\nnpm install lingo.dev\n```\n\n## Schritt 2. Framework konfigurieren\n\nWählen Sie Ihr Framework und folgen Sie der spezifischen Einrichtung:\n\n### Next.js\n\nAktualisieren Sie Ihre `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\nAktualisieren Sie Ihre `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\nAktualisieren Sie Ihre `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## Schritt 3. Authentifizierung einrichten\n\n**Lingo.dev Compiler** sendet Ihre Inhalte zur Lokalisierung an KI-Übersetzungs-Engines, daher müssen wir uns zuerst authentifizieren.\n\n### Option 1. Lingo.dev Engine\n\n**Lingo.dev Compiler** kann die **Lingo.dev Engine** als KI-Übersetzungsmodul verwenden.\n\nSie bietet dynamische Modellauswahl, automatisches Routing zu verschiedenen Modellen für jedes Sprachpaar, automatische Modell-Fallbacks, Übersetzungsspeicher, der frühere Übersetzungen berücksichtigt, und Glossar-Unterstützung für die domänenspezifische Terminologie Ihres Projekts. Es gibt sowohl kostenlose als auch kostenpflichtige Optionen, wobei die kostenlose Hobby-Stufe für die meisten Projekte ausreichend sein sollte.\n\nFür die Authentifizierung führen Sie aus:\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**Wichtiger Hinweis.** Wenn Sie den Brave-Browser verwenden oder Ihre Browser-Erweiterungen den Authentifizierungsablauf blockieren, können Sie sich manuell authentifizieren, indem Sie eine `LINGODOTDEV_API_KEY`-Umgebungsvariable zu Ihrer `.env`-Datei hinzufügen:\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\nSie finden den Token in den Projekteinstellungen der **Lingo.dev Engine**.\n\n### Option 2. Alternativer LLM-Provider\n\nAlternativ können Sie Modelle von einem der [unterstützten LLM-Anbieter](/compiler/how-it-works#option-2-alternative-llm-providers) verwenden:\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\nFügen Sie Ihren API-Schlüssel für Ihren konfigurierten LLM-Anbieter zu Ihrer Umgebung hinzu:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**Hinweis:** Stellen Sie sicher, dass Sie Ihr Konto beim LLM-Anbieter aktiviert und dessen Nutzungsbedingungen akzeptiert haben, bevor Sie es im Compiler verwenden.\n\n## Schritt 4. Provider hinzufügen\n\nUmschließen Sie Ihre Anwendung mit dem **LingoProvider**, um Übersetzungen zu aktivieren:\n\n### Next.js\n\nIn Ihrer `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 Ihrer `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 Ihrer `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## Schritt 5. Bauen und Testen\n\nStarten Sie Ihren Entwicklungsserver:\n\n```bash\nnpm run dev\n```\n\nDer Compiler wird automatisch:\n\n1. Ihre React-Komponenten nach übersetzbarem Text durchsuchen\n2. Übersetzungsschlüssel extrahieren\n3. Übersetzungen mittels KI generieren\n4. Optimierte Übersetzungsdateien im Verzeichnis `lingo/` erstellen\n\nIhre Anwendung ist jetzt mehrsprachig! Der Compiler erstellt versionierte Wörterbücher, die Inhaltsänderungen verfolgen und nur modifizierte Inhalte neu übersetzen.\n\n## Optional: Sprachumschalter hinzufügen\n\nFügen Sie einen Sprachumschalter hinzu, damit Benutzer die Sprache wechseln können:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n