Next.js 集成

Lingo.dev 编译器 无缝集成到 Next.js App Router 中，提供构建时的本地化支持，无需修改您的 React 组件。

按照以下步骤为您的 Next.js 应用程序添加多语言支持。

前置条件

  • Next.js 13+，使用 App Router
  • React 18+
  • Node.js 18 或更高版本
  • 对 dev 命令禁用 turbopack

第 1 步：安装包

安装 lingo.dev 包：

npm install lingo.dev

第 2 步：配置 Next.js

在您的 next.config.js 中导入并配置编译器：

import lingoCompiler from "lingo.dev/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 您现有的 Next.js 配置
};

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

第 3 步：设置身份验证

Lingo.dev Compiler 会将您的内容发送到 AI 翻译引擎进行本地化，因此您需要先进行身份验证。

选项 1. Lingo.dev Engine

Lingo.dev Compiler 可以使用 Lingo.dev Engine 作为您的 AI 翻译引擎。它提供动态模型选择、自动路由、翻译记忆和术语表支持。提供免费和付费选项。

要进行身份验证，请运行：

npx lingo.dev@latest login

如果您在浏览器流程中遇到问题，可以手动将 LINGODOTDEV_API_KEY 添加到您的 .env.local 文件中：


# .env.local

LINGODOTDEV_API_KEY=...

您可以在 Lingo.dev Engine 项目设置中找到该令牌。

选项 2. 替代 LLM 提供商

或者，您可以使用以下受支持的 LLM 提供商的模型：

将您的 API 密钥添加到 .env.local 文件中：


# .env.local

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

注意： 在 Compiler 中使用之前，请确保您已激活 LLM 提供商的账户并接受其服务条款。

第 4 步. 添加提供商

在您的根布局文件 (app/layout.tsx) 中导入提供商：

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <LingoProvider loadDictionary={(locale) => loadDictionary(locale)}>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

第 5 步. 可选：添加语言切换器

创建一个语言切换器组件：

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

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

第 6 步. 构建和测试

启动您的开发服务器：

npm run dev

编译器将自动：

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

访问 http://localhost:3000，查看您的多语言应用程序的运行效果。

配置选项

您可以自定义编译器的行为：

export default lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de", "ja"],
  sourceRoot: "app", // Next.js 的默认值
  lingoDir: "lingo", // 翻译文件目录
  rsc: true, // 启用 React 服务器组件支持
  debug: false, // 启用调试日志
})(nextConfig);

服务器组件和客户端组件

Lingo.dev 编译器支持服务器组件和客户端组件：

服务器组件

服务器组件在构建时处理，提供完整的翻译支持：

// app/page.tsx
export default function HomePage() {
  return (
    <div>
      <h1>欢迎使用我们的应用</h1>
      <p>此内容已自动翻译</p>
    </div>
  );
}

客户端组件

客户端组件接收优化的翻译包：

"use client";

import { useState } from "react";

export function InteractiveComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>您点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

生产部署

  1. 构建您的应用：

    npm run build

  2. 提交翻译文件：

    git add lingo/
git commit -m "添加翻译"

  3. 部署到您首选的平台（Vercel、Netlify 等）

您的 Next.js 应用将根据用户偏好或 URL 模式自动提供本地化内容。

下一步