Configuração - Lingo.dev

Alpha

O Lingo.dev Compiler está em alpha. É instável, não é recomendado para uso em produção, e as APIs podem mudar entre versões.

Adicione suporte multilíngue ao seu app React em menos de 5 minutos.

Pré-requisitos

Node.js 18+ e um app React com Next.js (App Router) ou Vite.

Instalar#

bash

pnpm install @lingo.dev/compiler

Configure seu framework#

Deixe sua configuração assíncrona e envolva-a com withLingo:

// next.config.ts
import type { NextConfig } from "next";
import { withLingo } from "@lingo.dev/compiler/next";

const nextConfig: NextConfig = {};

export default async function (): Promise<NextConfig> {
  return await withLingo(nextConfig, {
    sourceRoot: "./app",
    sourceLocale: "en",
    targetLocales: ["es", "de", "fr"],
    models: "lingo.dev",
    dev: {
      usePseudotranslator: true,
    },
  });
}

Adicione o LingoProvider#

tsx

// app/layout.tsx
import { LingoProvider } from "@lingo.dev/compiler/react";

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

Autenticar#

bash

npx @lingo.dev/cli login

Isso abrirá o navegador para autenticação. O plano Hobby gratuito atende à maioria dos projetos.

Se a autenticação via navegador estiver bloqueada, adicione a chave manualmente em .env:

bash

LINGODOTDEV_API_KEY=your_key_here

Execute o servidor de desenvolvimento#

bash

npm run dev

O compiler analisa seu JSX, gera pseudotraduções (traduções fictícias instantâneas para visualizar o que será traduzido) e as injeta nos componentes. Os metadados são armazenados em .lingo/metadata.json — faça commit disso no controle de versão.

Adicione um seletor de idioma (opcional)#

tsx

"use client"; // For Next.js

import { useLingoContext } from "@lingo.dev/compiler/react";

export function LanguageSwitcher() {
  const { locale, setLocale } = useLingoContext();

  return (
    <select value={locale} onChange={(e) => setLocale(e.target.value)}>
      <option value="en">English</option>
      <option value="es">Espanol</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

Gere traduções reais#

Quando estiver tudo pronto, desative o pseudotranslator:

{
  dev: {
    usePseudotranslator: false,
  }
}

Reinicie o servidor de desenvolvimento. O compiler gera traduções reais com IA para textos novos ou alterados.

Próximos passos#

Como funciona

O pipeline de transformação em tempo de build

Next.js

Configuração e recursos específicos do Next.js

Vite + React

Configuração e recursos específicos do Vite

Referência de configuração

Todas as opções de configuração