\n \n

\n );\n}\n```\n\n## Prochaines étapes\n\n- **Guides spécifiques aux frameworks** : [Next.js](./frameworks/nextjs-app-router), [React Router](./frameworks/react-router-v6), [Vite](./frameworks/vite-react-ts)\n- **Comment ça fonctionne** : [Comprendre le traitement au moment de la compilation](./how-it-works)\n- **Configuration avancée** : [Options de personnalisation](./configuration/advanced)\n","content","\n**Lingo.dev Compiler** est conçu pour rendre n'importe quelle application React multilingue au moment de la compilation sans nécessiter de modifications des composants React existants.\n\nCe guide de démarrage rapide vous aidera à ajouter la prise en charge multilingue à votre application React en moins de 5 minutes.\n\nÀ la fin de ce guide, vous aurez :\n\n1. Installé et configuré **Lingo.dev Compiler** dans votre application React\n2. Mis en place l'extraction et l'injection automatisées des traductions\n3. Une application multilingue fonctionnelle avec des traductions optimisées\n\nCommençons !\n\n## Prérequis\n\n**Lingo.dev Compiler** fonctionne avec les frameworks React modernes. Avant de commencer, assurez-vous d'avoir l'une des configurations prises en charge :\n\n- **Next.js** (App Router)\n- **React Router** / **Remix**\n- **Vite + React**\n\nOu explorez nos applications de démonstration : [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), et [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project).\n\n## Étape 1. Installer le package\n\nInstallez le package **lingo.dev** dans votre projet :\n\n```bash\nnpm install lingo.dev\n```\n\n## Étape 2. Configurer votre framework\n\nChoisissez votre framework et suivez la configuration spécifique :\n\n### Next.js\n\nMettez à jour votre `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: Moteur Lingo.dev\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\nMettez à jour votre `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: Moteur Lingo.dev\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\nMettez à jour votre `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: Moteur Lingo.dev\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## Étape 3. Configurer l'authentification\n\n**Lingo.dev Compiler** envoie votre contenu aux moteurs de traduction IA pour la localisation, nous devons donc d'abord nous authentifier.\n\n### Option 1. Moteur Lingo.dev\n\n**Lingo.dev Compiler** peut utiliser le **Moteur Lingo.dev** comme votre moteur de traduction IA.\n\nIl offre une sélection dynamique de modèles, un routage automatique vers différents modèles pour chaque paire de langues, des replis automatiques de modèles, une mémoire de traduction qui prend en compte les traductions antérieures, et la prise en charge de glossaires pour la terminologie spécifique au domaine de votre projet. Il existe des options gratuites et payantes, et le niveau gratuit Hobby devrait être suffisant pour la plupart des projets.\n\nPour vous authentifier, exécutez :\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**Détail important.** Si vous utilisez le navigateur Brave, ou si vos extensions de navigateur bloquent le flux d'authentification, vous pouvez vous authentifier manuellement en ajoutant une variable d'environnement `LINGODOTDEV_API_KEY` à votre fichier `.env` :\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\nVous trouverez le jeton dans les Paramètres du Projet **Moteur Lingo.dev**.\n\n### Option 2. Fournisseur LLM alternatif\n\nAlternativement, vous pouvez utiliser des modèles provenant de l'un des [fournisseurs de LLM supportés](/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\nAjoutez votre clé API pour votre fournisseur de LLM configuré à votre environnement :\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**Remarque :** Assurez-vous d'activer votre compte auprès du fournisseur de LLM et d'accepter leurs conditions d'utilisation avant de l'utiliser dans Compiler.\n\n## Étape 4. Ajouter le Provider\n\nEnveloppez votre application avec le **LingoProvider** pour activer les traductions :\n\n### Next.js\n\nDans votre `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\nDans votre `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\nDans votre `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## Étape 5. Compiler et tester\n\nLancez votre serveur de développement :\n\n```bash\nnpm run dev\n```\n\nLe compilateur va automatiquement :\n\n1. Scanner vos composants React pour détecter le texte traduisible\n2. Extraire les clés de traduction\n3. Générer des traductions en utilisant l'IA\n4. Créer des fichiers de traduction optimisés dans le répertoire `lingo/`\n\nVotre application est maintenant multilingue ! Le compilateur crée des dictionnaires versionnés qui suivent les modifications de contenu et ne retraduit que le contenu modifié.\n\n## Optionnel : Ajouter un sélecteur de langue\n\nAjoutez un sélecteur de langue pour permettre aux utilisateurs de changer de langue :\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n

Démarrage rapide