How it Works

Lingo.dev Compiler automates React app localization at build time through intelligent code analysis and AI-powered translation.

When you run your build process, the compiler performs the following steps to make your app multilingual without changing your source code:

1. AST Analysis

Lingo.dev Compiler processes your React code's Abstract Syntax Tree (AST) to deterministically identify translatable content. It analyzes:

  • JSX text content and attributes
  • String literals within React components (Support for string literals coming soon.)
  • Dynamic content patterns

The compiler understands React component boundaries and maintains contextual information for accurate translations.

2. Content Extraction

The compiler extracts translatable strings while preserving:

  • Component hierarchy and context
  • React-specific patterns like props and state
  • Code structure and formatting

Only human-readable content is extracted. Technical identifiers, code snippets, and non-translatable elements are automatically filtered out.

3. Fingerprinting & Versioning

Content fingerprinting ensures efficient translation management:

  • MD5 hashing creates unique content fingerprints
  • Versioned dictionaries track changes in the lingo/ directory
  • Git integration maintains translation history
  • Delta processing only translates new or modified content

This approach minimizes translation costs and maintains consistency across builds.

4. AI Translation

Translation happens through AI models with contextual understanding:

  • AI model integration provides fast, high-quality translations through GROQ or Lingo.dev Engine
  • Contextual boundaries help AI understand component relationships
  • Consistent terminology across your entire application
  • Batch processing for optimal performance

The compiler sends contextual information to ensure translations fit naturally within your UI components.

5. Code Injection

Translations are injected back into your build without modifying source files:

  • Build-time processing creates localized versions
  • Framework integration works with Next.js, Vite, and React Router
  • Optimized bundles with per-locale dictionary loading
  • Runtime efficiency through pre-compiled translations

The result is production-ready, multilingual React apps with minimal runtime overhead.

Framework Integration

Next.js App Router

The compiler integrates with Next.js through the configuration system:

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • Server Components are processed at build time
  • Client Components receive optimized translation bundles
  • Automatic routing supports locale-based URLs

React Router / Remix

Integration through Vite plugin architecture:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Server-side rendering with preloaded dictionaries
  • Client-side hydration maintains translation state
  • Route-based code splitting includes translation bundles

Vite

Direct Vite plugin integration:

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • Hot module replacement updates translations during development
  • Build optimization creates minimal production bundles
  • Asset handling manages translation files efficiently

Development Workflow

  1. Write React components using natural language text
  2. Run development server - compiler extracts and translates content
  3. Review translations in the generated lingo/ directory
  4. Commit translation files to version control
  5. Deploy with built-in multilingual support

Production Benefits

  • Zero runtime cost - translations are pre-compiled
  • Optimal bundle sizes - only used translations are included
  • SEO friendly - proper locale-specific rendering
  • Consistent UX - professional translation quality

The compiler creates production apps that feel natively built for each supported language while maintaining your original development workflow.

Next Steps