---
title: Cómo funciona
---

**Lingo.dev Compiler** automatiza la localización de aplicaciones React durante el tiempo de compilación mediante análisis inteligente de código y traducción impulsada por IA.

Cuando ejecutas tu proceso de compilación, el compilador realiza los siguientes pasos para hacer que tu aplicación sea multilingüe sin cambiar tu código fuente:

## 1. Análisis AST

**Lingo.dev Compiler** procesa el Árbol de Sintaxis Abstracta (AST) de tu código React para identificar determinísticamente el contenido traducible. Analiza:

- Contenido de texto JSX y atributos
- Literales de cadena dentro de componentes React (**Soporte para literales de cadena próximamente.**)
- Patrones de contenido dinámico

El compilador comprende los límites de los componentes React y mantiene información contextual para traducciones precisas.

## 2. Extracción de contenido

El compilador extrae cadenas traducibles mientras preserva:

- Jerarquía y contexto de componentes
- Patrones específicos de React como props y state
- Estructura y formato del código

Solo se extrae el contenido legible por humanos. Los identificadores técnicos, fragmentos de código y elementos no traducibles se filtran automáticamente.

## 3. Huella digital y versionado

La huella digital del contenido garantiza una gestión eficiente de la traducción:

- **Hashing MD5** crea huellas digitales únicas del contenido
- **Diccionarios versionados** rastrean cambios en el directorio `lingo/`
- **Integración con Git** mantiene el historial de traducciones
- **Procesamiento delta** solo traduce contenido nuevo o modificado

Este enfoque minimiza los costos de traducción y mantiene la consistencia entre compilaciones.

## 4. Traducción por IA

La traducción se realiza a través de modelos de IA con comprensión contextual:

- **Integración de modelos de IA** proporciona traducciones rápidas y de alta calidad a través de [Lingo.dev Engine o uno de los proveedores LLM compatibles](/compiler/how-it-works#llm-providers)
- **Límites contextuales** ayudan a la IA a entender las relaciones entre componentes
- **Terminología consistente** en toda tu aplicación
- **Procesamiento por lotes** para un rendimiento óptimo

El compilador envía información contextual para garantizar que las traducciones se ajusten naturalmente dentro de tus componentes de UI.

## 5. Inyección de código

Las traducciones se inyectan de nuevo en tu compilación sin modificar los archivos fuente:

- El **procesamiento en tiempo de compilación** crea versiones localizadas
- La **integración con frameworks** funciona con Next.js, Vite y React Router
- **Paquetes optimizados** con carga de diccionarios por localización
- **Eficiencia en tiempo de ejecución** mediante traducciones precompiladas

El resultado son aplicaciones React multilingües listas para producción con una sobrecarga mínima en tiempo de ejecución.

## Integración con frameworks

### Next.js App Router

El compilador se integra con Next.js a través del sistema de configuración:

```js
// next.config.js
export default lingoCompiler.next(config)(nextConfig);
```

- Los **componentes de servidor** se procesan en tiempo de compilación
- Los **componentes de cliente** reciben paquetes de traducción optimizados
- El **enrutamiento automático** admite URLs basadas en localización

### React Router / Remix

Integración a través de la arquitectura de plugins de Vite:

```js
// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
```

- **Renderizado del lado del servidor** con diccionarios precargados
- La **hidratación del lado del cliente** mantiene el estado de traducción
- La **división de código basada en rutas** incluye paquetes de traducción

### Vite

Integración directa con plugins de Vite:

```js
// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
```

- El **reemplazo de módulos en caliente** actualiza las traducciones durante el desarrollo
- La **optimización de compilación** crea paquetes de producción mínimos
- La **gestión de activos** administra los archivos de traducción de manera eficiente

## Flujo de trabajo de desarrollo

1. **Escribe componentes React** utilizando texto en lenguaje natural
2. **Ejecuta el servidor de desarrollo** - el compilador extrae y traduce el contenido
3. **Revisa las traducciones** en el directorio `lingo/` generado
4. **Confirma los archivos de traducción** en el control de versiones
5. **Despliega** con soporte multilingüe integrado

## Beneficios en producción

- **Cero costo en tiempo de ejecución** - las traducciones están precompiladas
- **Tamaños de paquete óptimos** - solo se incluyen las traducciones utilizadas
- **Compatible con SEO** - renderizado adecuado específico para cada localización
- **Experiencia de usuario consistente** - calidad de traducción profesional

El compilador crea aplicaciones de producción que se sienten construidas nativamente para cada idioma soportado mientras mantiene tu flujo de trabajo de desarrollo original.

## Proveedores de LLM

### Opción 1. Motor de Lingo.dev

**Lingo.dev Compiler** puede utilizar **Lingo.dev Engine** como tu motor de traducción de IA.

Proporciona 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 gratuitas y de pago, y el nivel gratuito Hobby debería ser suficiente para la mayoría de los proyectos.

Para autenticarte, ejecuta:

```bash
npx lingo.dev@latest login
```

Configura Lingo.dev Engine como tu proveedor, por ejemplo, para Next.js:

```js
lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);
```

**Detalle importante.** Si estás utilizando el navegador Brave, o si 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`:

```bash
LINGODOTDEV_API_KEY=...
```

### Opción 2. Proveedores alternativos de LLM

El compilador admite los siguientes proveedores de LLM:

- [GROQ](https://groq.com/) y sus [modelos](https://console.groq.com/docs/models),
- [Google AI](https://aistudio.google.com/) y sus [modelos](https://ai.google.dev/gemini-api/docs/models),
- [OpenRouter](https://openrouter.ai/) y sus [modelos](https://openrouter.ai/models),
- [Ollama](https://ollama.com/) y sus [modelos](https://ollama.com/library).
- [Mistral](https://mistral.ai/) y sus [modelos](https://docs.mistral.ai/getting-started/models/models_overview/).

Necesitas crear una cuenta y obtener una clave API del proveedor de LLM que elijas para configurar.

**Nota:** Asegúrate de activar tu cuenta con el proveedor de LLM y aceptar sus Términos de servicio antes de utilizarlo en el Compilador. El proveedor de LLM podría impedirte usar su plataforma antes de que completes todos los pasos. Los pasos pueden variar para cada proveedor de LLM.

Configura el proveedor de LLM de tu elección, por ejemplo, para usar Groq en una aplicación Next.js:

```js
lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:qwen/qwen3-32b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);
```

Añade tu clave API para tu proveedor de LLM configurado a tu entorno:

```bash

# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...
```

Nos encantaría dar soporte a más LLMs - [habla con nosotros](https://lingo.dev/go/discord) o [envíanos una pull request](https://github.com/lingodotdev/lingo.dev/)!

## Próximos pasos

- **Integración con frameworks**: [Next.js](/compiler/frameworks/nextjs-app-router), [React Router](/compiler/frameworks/react-router-v6), [Vite](/compiler/frameworks/vite-react-ts)
- **Configuración avanzada**: [Opciones de personalización](/compiler/configuration/advanced)
- **FAQ**: [Preguntas frecuentes y solución de problemas](/compiler/guides/faq)
