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 步：设置身份验证

在 groq.com 创建一个免费账户，并添加您的 API 密钥：


# .env.local

GROQ_API_KEY=gsk_...

第 4 步：添加 Provider

在根布局文件 (app/layout.tsx) 中导入 provider：

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 Server Components 支持
  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 模式自动提供本地化内容。

下一步