快速开始

Lingo.dev 编译器 旨在无需更改现有 React 组件的情况下，在构建时使任何 React 应用程序支持多语言。

本快速开始指南将帮助您在不到 5 分钟内为您的 React 应用程序添加多语言支持。

完成本指南后，您将能够：

  1. 在您的 React 应用程序中安装并配置 Lingo.dev 编译器
  2. 设置自动翻译提取和注入
  3. 拥有一个带有优化翻译的多语言应用程序

让我们开始吧！

前提条件

Lingo.dev Compiler 兼容现代 React 框架。在开始之前，请确保您使用的是以下支持的设置之一：

  • Next.js（App Router）
  • React Router / Remix
  • Vite + React

或者探索我们的演示应用：Next.js、React Router 和 Vite。

第 1 步：安装软件包

在您的项目中安装 lingo.dev 软件包：

npm install lingo.dev

第 2 步：配置您的框架

选择您的框架并按照特定的设置步骤：

Next.js

更新您的 next.config.js：

import lingoCompiler from "lingo.dev/compiler";

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:mistral-saba-24b",
  },
})(nextConfig);

React Router / Remix

更新您的 vite.config.ts：

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Vite

更新您的 vite.config.ts：

import lingoCompiler from "lingo.dev/compiler";

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

第 3 步：设置身份验证

Lingo.dev 编译器 使用 GROQ 提供 AI 驱动的翻译。在 groq.com 创建一个免费账户并获取您的 API 密钥。

将您的 API 密钥添加到环境中：


# .env

GROQ_API_KEY=gsk_...

第 4 步：添加提供程序

将您的应用程序包裹在 LingoProvider 中以启用翻译：

Next.js

在您的 layout.tsx 中：

import { LingoProvider, loadDictionary } from "lingo.dev/react/rsc";

export default function Layout({ children }) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

React Router / Remix

在您的 root.tsx 中：

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";

export async function loader(args) {
  return { lingoDictionary: await loadDictionary(args.request) };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData();
  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

Vite

在您的 main.tsx 中：

import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")).render(
  <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
    <App />
  </LingoProviderWrapper>,
);

第 5 步：构建和测试

运行您的开发服务器：

npm run dev

编译器将自动：

  1. 扫描您的 React 组件以查找可翻译的文本
  2. 提取翻译键
  3. 使用 AI 生成翻译
  4. 在 lingo/ 目录中创建优化的翻译文件

您的应用程序现在是多语言的！编译器会创建版本化的字典来跟踪内容更改，并且仅重新翻译已修改的内容。

可选：添加语言切换器

添加一个语言切换器，让用户可以更改语言：

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
    </header>
  );
}

下一步