Lingo.dev Compiler

Lingo.dev Compiler 是一款免费开源的构建时翻译系统，可让 React 应用实现多语言支持，无需修改你的组件。

想要查看编译器的实际效果，请访问此在线演示：https://x.com/MaxPrilutskiy/status/1929946504216932746

快速示例

添加编译器之前：

export function Welcome() {
  return <h1>Welcome to our app</h1>;
}

添加编译器后（无需更改代码）：

// Same code - translations injected automatically at build time
export function Welcome() {
  return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicación" in Spanish

工作原理

编译器会自动检测 JSX 中可翻译的文本，利用 AI 生成翻译，并在构建时注入。你的源代码保持不变——翻译在构建过程中透明完成。

核心原则： 翻译在编译时确定，仅生成所需语言的优化包。这意味着更快的加载速度、更小的包体积和更优的 SEO。

差异化优势

与运行时翻译库（如 i18next、react-intl）不同，Lingo.dev Compiler：

  • 在构建时工作，而非运行时
  • 无需手动管理翻译 key
  • 利用 AI 自动生成翻译
  • 零运行时开销
  • 保持 React 代码整洁——无需 t() 函数调用

主要特性

  • 默认全自动 - 无需 "use i18n" 指令（如需按需启用可选）
  • 零运行时开销 - 翻译在构建时预编译进包
  • 多种构建模式 - 开发环境可用伪翻译，CI 环境用真实翻译，生产环境仅缓存
  • 类型安全 - 完全支持 TypeScript，自动生成类型
  • 手动覆盖 - 可通过 data-lingo-override 属性精确控制特定翻译
  • 自定义语言解析器 - 可实现自定义的语言检测与持久化逻辑
  • 自动复数处理 - 支持 ICU MessageFormat 复数形式
  • 开发小工具 - 浏览器内实时翻译编辑器

支持的框架

  • Next.js（支持 App Router 和 React Server Components）
  • Vite + React（支持 SPA 和 SSR）

更多框架即将支持。

常见问题

生产环境需要 API 密钥吗？ 不需要。在生产环境中使用 buildMode: "cache-only" ——翻译会在 CI 阶段预生成，无需 API 调用。

可以控制哪些文件被翻译吗？ 可以。设置 useDirective: true，要求在需要翻译的文件顶部添加 'use i18n' 指令。默认是自动（全部文件）。

如果 AI 翻译有误怎么办？ 可以使用 data-lingo-override 属性，为特定语言指定准确翻译。适用于任意 JSX 元素。

如何在不调用 API 的情况下测试？ 在开发环境启用 usePseudotranslator: true，可即时生成伪翻译，方便查看哪些内容会被翻译，无需 API 成本。

下一步