\n \n

\n );\n}\n```\n\n## Siguientes pasos\n\n- **Guías específicas de frameworks**: [Next.js](./frameworks/nextjs-app-router), [React Router](./frameworks/react-router-v6), [Vite](./frameworks/vite-react-ts)\n- **Cómo funciona**: [Entendiendo el procesamiento en tiempo de compilación](./how-it-works)\n- **Configuración avanzada**: [Opciones de personalización](./configuration/advanced)\n","content","\n**Lingo.dev Compiler** está diseñado para hacer que cualquier aplicación React sea multilingüe durante el tiempo de compilación sin requerir cambios en los componentes React existentes.\n\nEsta guía de inicio rápido te ayudará a añadir soporte multilingüe a tu aplicación React en menos de 5 minutos.\n\nAl completar esta guía, podrás:\n\n1. Instalar y configurar **Lingo.dev Compiler** en tu aplicación React\n2. Configurar la extracción e inyección automatizada de traducciones\n3. Tener una aplicación multilingüe funcional con traducciones optimizadas\n\n¡Comencemos!\n\n## Requisitos previos\n\n**Lingo.dev Compiler** funciona con frameworks modernos de React. Antes de comenzar, asegúrate de tener una de las configuraciones compatibles:\n\n- **Next.js** (App Router)\n- **React Router** / **Remix**\n- **Vite + React**\n\nO explora nuestras aplicaciones de demostración: [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), y [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project).\n\n## Paso 1. Instalar el paquete\n\nInstala el paquete **lingo.dev** en tu proyecto:\n\n```bash\nnpm install lingo.dev\n```\n\n## Paso 2. Configurar tu framework\n\nElige tu framework y sigue la configuración específica:\n\n### Next.js\n\nActualiza tu `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\", // Opción 1: Motor Lingo.dev\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // Opción 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // Opción 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // Opción 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // Opción 2: Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n})(nextConfig);\n```\n\n### React Router / Remix\n\nActualiza tu `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\", // Opción 1: Motor Lingo.dev\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // Opción 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // Opción 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // Opción 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // Opción 2: Ollama\n // },\n })(viteConfig),\n);\n```\n\n### Vite\n\nActualiza tu `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\", // Opción 1: Motor Lingo.dev\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // Opción 2: GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // Opción 2: Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // Opción 2: OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // Opción 2: Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n })(viteConfig),\n);\n```\n\n## Paso 3. Configurar la autenticación\n\n**Lingo.dev Compiler** envía tu contenido a motores de traducción de IA para localización, por lo que necesitamos autenticarnos primero.\n\n### Opción 1. Motor Lingo.dev\n\n**Lingo.dev Compiler** puede utilizar el **Motor Lingo.dev** como tu motor de traducción por IA.\n\nProporciona selección dinámica de modelos, enrutamiento automático a diferentes modelos para cada par de idiomas, respaldos automáticos de modelos, memoria de traducción que considera traducciones anteriores y soporte de glosario para la terminología específica del dominio de tu proyecto. Hay opciones tanto gratuitas como de pago, y el nivel gratuito Hobby debería ser suficiente para la mayoría de los proyectos.\n\nPara autenticarte, ejecuta:\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**Detalle importante.** Si estás utilizando el navegador Brave, o tus extensiones del navegador están bloqueando el flujo de autenticación, puedes autenticarte manualmente añadiendo una variable de entorno `LINGODOTDEV_API_KEY` a tu archivo `.env`:\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\nEncontrarás el token en la Configuración del Proyecto del **Motor Lingo.dev**.\n\n### Opción 2. Proveedor LLM alternativo\n\nAlternativamente, puedes utilizar modelos de uno de [los proveedores de LLM compatibles](/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\nAñade tu clave API para el proveedor de LLM configurado a tu entorno:\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**Nota:** Asegúrate de activar tu cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de utilizarlo en Compiler.\n\n## Paso 4. Añadir el Provider\n\nEnvuelve tu aplicación con el **LingoProvider** para habilitar las traducciones:\n\n### Next.js\n\nEn tu `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\nEn tu `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\nEn tu `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## Paso 5. Compilar y probar\n\nEjecuta tu servidor de desarrollo:\n\n```bash\nnpm run dev\n```\n\nEl compilador automáticamente:\n\n1. Analizará tus componentes React para encontrar texto traducible\n2. Extraerá las claves de traducción\n3. Generará traducciones utilizando IA\n4. Creará archivos de traducción optimizados en el directorio `lingo/`\n\n¡Tu aplicación ahora es multilingüe! El compilador crea diccionarios versionados que rastrean cambios de contenido y solo retraduce el contenido modificado.\n\n## Opcional: Añadir selector de idioma\n\nAñade un selector de idioma para permitir a los usuarios cambiar de idioma:\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n

Inicio rápido