如何在Next.js应用中集成Replexica：分步配置指南

2026-02-06 05:28:09作者：薛曦旖Francesca

Replexica（现为Lingo.dev）是一个专为React应用设计的国际化引擎，能够快速为Next.js项目添加多语言支持。无论您是初学者还是经验丰富的开发者，本指南将帮助您在15分钟内完成配置！🚀

为什么选择Replexica？

Replexica让React应用的国际化变得简单快捷。它通过编译器级别的转换自动处理JSX文本，无需手动编写翻译代码。对于Next.js开发者来说，这意味着可以专注于业务逻辑，而将多语言处理的复杂性交给工具。

准备工作

在开始配置之前，确保您有一个现有的Next.js项目。如果还没有，可以通过以下命令创建：

npx create-next-app@latest my-app
cd my-app

第一步：安装Replexica编译器

在您的Next.js项目中安装@lingo.dev/compiler包：

npm install @lingo.dev/compiler
# 或
pnpm add @lingo.dev/compiler

第二步：配置Next.js

修改您的next.config.js文件，使用withLingo函数包装现有配置：

import { withLingo } from '@lingo.dev/compiler/next';

const nextConfig = {};

export default async function () {
  return await withLingo(nextConfig, {
    sourceRoot: './app',
    sourceLocale: 'en',
    targetLocales: ['es', 'de', 'fr'],
    models: 'lingo.dev',
    dev: {
      usePseudotranslator: true,
    },
    buildMode: 'cache-only',
  });
}

第三步：添加LingoProvider

在您的根布局文件（app/layout.tsx）中包裹应用：

import { LingoProvider } from '@lingo.dev/compiler/react';

export default function RootLayout({ children }) {
  return (
    <LingoProvider>
      <html>
        <body>{children}</body>
      </html>
    </LingoProvider>
  );
}

第四步：配置环境变量

在.env文件中添加您的API密钥：

LINGODOTDEV_API_KEY=your_api_key_here

第五步：开发模式设置

在开发环境中，您可以使用伪翻译功能快速测试：

dev: {
  usePseudotranslator: true,  // 使用伪翻译而非真实AI
}

配置选项详解

核心配置参数

sourceRoot: 源代码根目录（默认为'src'）
sourceLocale: 源语言代码（如'en'）
targetLocales: 目标语言数组（如['es', 'de', 'fr']）

构建模式选择

translate模式：在构建时生成缺失翻译
cache-only模式：仅使用现有缓存翻译

最佳实践建议

开发阶段：使用translate模式配合伪翻译
测试阶段：生成真实翻译并验证
生产构建：使用cache-only模式避免API调用

常见问题解决

翻译不生效？

检查LingoProvider是否正确包裹了您的应用，并且配置参数无误。

构建失败？

确保在production构建中使用cache-only模式，或提供有效的API密钥。

快速验证配置

启动开发服务器后，访问您的应用。如果配置正确，您应该能看到文本被自动翻译（或伪翻译）为目标语言。

下一步行动

完成基础配置后，您可以探索Replexica的更多高级功能：

自定义翻译提示
手动翻译覆盖
复数形式处理
自定义语言解析器

通过这个简单的分步指南，您应该能够在Next.js应用中成功集成Replexica，为您的产品添加多语言支持，扩大全球用户群体！🌍

记住，国际化不仅仅是翻译文本，更是为不同文化背景的用户提供更好的体验。Replexica让这个过程变得更加简单高效。

replexica

Open-source localization engineering tools. Connects to Lingo.dev localization engineering platform for consistent, quality translations.

项目地址：https://gitcode.com/GitHub_Trending/re/replexica

登录后查看全文