\n \n

\n );\n}\n```\n\n## 下一步\n\n- **框架特定指南**：[Next.js](./frameworks/nextjs)、[React Router](./frameworks/react-router)、[Vite](./frameworks/vite)\n- **工作原理**：[了解构建时处理](./how-it-works)\n- **高级配置**：[自定义选项](./configuration/advanced)\n","content","\n**Lingo.dev Compiler** 旨在在构建时使任何 React 应用程序支持多语言，而无需更改现有的 React 组件。\n\n本快速入门指南将帮助您在不到 5 分钟的时间内为您的 React 应用程序添加多语言支持。\n\n完成本指南后，您将能够：\n\n1. 在您的 React 应用程序中安装并配置 **Lingo.dev Compiler**\n2. 设置自动化的翻译提取和注入\n3. 拥有一个带有优化翻译的多语言应用程序\n\n让我们开始吧！\n\n## 前提条件\n\n**Lingo.dev Compiler** 兼容现代 React 框架。在开始之前，请确保您使用的是以下支持的设置之一：\n\n- **Next.js**（App Router）\n- **React Router** / **Remix**\n- **Vite + React**\n\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) 和 [Vite](https://github.com/lingodotdev/lingo.dev/tree/main/demo/vite-project)。\n\n## 第 1 步：安装软件包\n\n在您的项目中安装 **lingo.dev** 软件包：\n\n```bash\nnpm install lingo.dev\n```\n\n## 第 2 步：配置您的框架\n\n选择您的框架并按照特定的设置步骤：\n\n### Next.js\n\n更新您的 `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\", // 选项 1：Lingo.dev 引擎\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 选项 2：GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 选项 2：Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 选项 2：OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 选项 2：Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n})(nextConfig);\n```\n\n### React Router / Remix\n\n更新您的 `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\", // 选项 1：Lingo.dev 引擎\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 选项 2：GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 选项 2：Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 选项 2：OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 选项 2：Ollama\n // },\n })(viteConfig),\n);\n```\n\n### Vite\n\n更新您的 `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\", // 选项 1：Lingo.dev 引擎\n // models: {\n // \"*:*\": \"groq:mistral-saba-24b\", // 选项 2：GROQ\n // \"*:*\": \"google:gemini-2.0-flash\", // 选项 2：Google AI\n // \"*:*\": \"openrouter:mistralai/mistral-small-24b-instruct-2501\", // 选项 2：OpenRouter\n // \"*:*\": \"ollama:mistral-small3.1\", // 选项 2：Ollama\n // \"*:*\": \"mistral:mistral-small-latest\", // Mistral\n // },\n })(viteConfig),\n);\n```\n\n## 第 3 步：设置身份验证\n\n**Lingo.dev 编译器** 会将您的内容发送到 AI 翻译引擎进行本地化，因此我们需要先进行身份验证。\n\n### 选项 1. Lingo.dev 引擎\n\n**Lingo.dev 编译器** 可以使用 **Lingo.dev 引擎** 作为您的 AI 翻译引擎。\n\n它提供动态模型选择、针对每种语言对的自动模型路由、自动模型回退、考虑过往翻译的翻译记忆，以及支持项目领域特定术语的术语表功能。提供免费和付费选项，免费 Hobby 计划对大多数项目来说已经足够。\n\n要进行身份验证，请运行：\n\n```bash\nnpx lingo.dev@latest login\n```\n\n**重要细节。** 如果您使用的是 Brave 浏览器，或者您的浏览器扩展阻止了身份验证流程，您可以通过在 `.env` 文件中添加 `LINGODOTDEV_API_KEY` 环境变量手动进行身份验证：\n\n```bash\nLINGODOTDEV_API_KEY=...\n```\n\n您可以在 **Lingo.dev 引擎** 项目设置中找到该令牌。\n\n### 选项 2. 替代 LLM 提供商\n\n或者，您可以使用[支持的 LLM 提供商](/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\n将您的 LLM 提供商的 API 密钥添加到环境中：\n\n```bash\n\n# .env\n\nGROQ_API_KEY=gsk_...\nGOOGLE_API_KEY=...\nOPENROUTER_API_KEY=...\nMISTRAL_API_KEY=...\n```\n\n**注意：** 在 Compiler 中使用之前，请确保激活您的 LLM 提供商账户并接受其服务条款。\n\n## 第 4 步：添加 Provider\n\n使用 **LingoProvider** 包裹您的应用以启用翻译：\n\n### Next.js\n\n在您的 `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\n在您的 `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\n在您的 `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## 第 5 步：构建和测试\n\n运行您的开发服务器：\n\n```bash\nnpm run dev\n```\n\n编译器将自动：\n\n1. 扫描您的 React 组件以查找可翻译的文本\n2. 提取翻译键\n3. 使用 AI 生成翻译\n4. 在 `lingo/` 目录中创建优化的翻译文件\n\n您的应用现在是多语言的！编译器会创建版本化的字典，跟踪内容更改，并仅重新翻译已修改的内容。\n\n## 可选：添加语言切换器\n\n添加一个语言切换器，让用户可以更改语言：\n\n```tsx\nimport { LocaleSwitcher } from \"lingo.dev/react/client\";\n\nexport function Header() {\n return (\n

\n \n

快速开始